<div id="background">
<img src="images/bg.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}I put this background the very first div container. It totally covered up my other pictures. I want to force this background stay behind all other elements.
How do I do that?
Thanks
Jump to PostDo you want to apply the same style all over the page ?
Then use this:
<body id="background"> ... </body>
Jump to PostGive the z-index to negative value.
z-index: -10000Hope this help.. Why not use body or parent element background? The background you used is not a background. It's html element and not the same as background.
Do you want to apply the same style all over the page ?
Then use this:
<body id="background">
...
</body>
Give the z-index to negative value.
z-index: -10000Hope this help.. Why not use body or parent element background? The background you used is not a background. It's html element and not the same as background.
<div id="background"> <img src="images/bg.jpg" class="stretch" alt="" /> </div> #background { width: 100%; height: 100%; position: absolute; overflow: hidden; left: 0px; top: 0px; z-index: 0; } .stretch { width:100%; height:100%; }I put this background the very first div container. It totally covered up my other pictures. I want to force this background stay behind all other elements.
How do I do that?
Thanks
Hello,
The code that you used for trying to display a background image, is a HTML Block Level Element. [IMG]
You should try something like this
body {
background:url('image.jpg') no-repeat;
}You could also set the image as a background image in CSS, and depending on what your trying to active, set the background image attributes accordingly.
#background {
background: #ffffff url(/images/bg.jpg) no-repeat fixed top left;
}See W3 Schools for background image attributes.
assumption:: to make a less than fullscreen image stretch to fullscreen, instead of tile, ( repeat-x repeat-y )
set the z-index lower than zero
the default z-index is zero,
the fullscreen image overwrites everything else at zero
#background { width:100%; height:100%; position:absolute; overflow:hidden; left:0; top:0; z-index:-1000; }giving the background a hugely negative z-index means there is space for other elements to be above the background but behind the text.
It may (may = untested) be easier in the html to type
<img id="background" src="images/bg.jpg" alt="" />Weirdness:: 0px = 0em = 0pt = 0% = 0cm = 0inch = 0: zero is the only dimension that needs no unit, you can write 0
You can't put a unit on 0 if you expect it to work with all browsers.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.