I'm working on my first website and I've stumbled across a problem.
How do i make my main contentBox cover the subNav? Img Here
You can set the z-index property.
To get an image over another image:
Using CSS, absolutely position your image and set the top value to 0 for both images.
However, I am not sure you are asking the correct question as in your image, your content areas seem to be above the area you want them to be placed.
Also - are your web page areas all images?
Related
To make it more simple, i'm working on this site https://webdev02.amontagnana.it/ and on the 4th row we can see a text block and an embedded video.
I need to make the video's height just like the block on the left. (it has to be relative too because it has to be responsive to desktop and mobile)
Your site are loading and loading
If you are cover an entire DIV . you need to fixed position and increase z-index as much as possible.
you can simply add a custom class on tatsu-column-inner and add the background color black on it
See the attached screenshort
I created this image gallery that an image is revealed on hovering but the revealed image is in a different place in every computer/browser i open it in but for the life of me I can't figure out why.
I just want the revealed image to appear in the middle without being on top of other images but when i get it to that setting on one computer it looks different on another.
I'm new to coding so I really hope someone helps. Here's the link to my codepen: image gallery
[1]: http://codepen.io/zenturtle/pen/ezDGC
For consistent placement, you need to give the #perimeter div position: relative, so that the positioning of the large images will always be in relation to the containing div, which has a fixed width. Otherwise, the positioning is in relation to the browser/viewport, meaning that it will be different depending on the size/width of the browser.
#perimeter {position: relative;}
You will probably have to adjust all of the large image coordinates now. There are more efficient ways to do this, though. You should be able to place all of those images with one CSS rule, rather than separate ones for each image.
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
How can I make all my pages have the same background feeling as my homepage. For example if you see this page you can see the background is out of place. Let me know if you want me to send you the code but pretty much you can see it at these pages. Thanks a lot!
PS: Any other way besides using position fixed?
Try a different approach... Instead of using 2 different gradients in two different div's (#hhbg and #footer), just combine the two gradients into one image and apply it as a background to, for example, body. Then use background-position to anchor the image to the bottom corner and repeat it horizontally.
I've noticed that recently sites began to keep images in one big image.
For example google.com
We see a lot of little images on left side. But really is one image:
How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)
Thanks for reply
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.
try changing the px values in the css in the background part. you should see the image moving
<span style="background-position:-20px -132px" class="micon"></span>
here you see the background-position which is used for this image
This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.
This is called "CSS Sprites".
There are a lot of informations on Internet about that. In random order :
Smashing Magazine
CSS Tricks
A List Apart
And many more ...