0
<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

7
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by MidiMagic
0

Do you want to apply the same style all over the page ?

Then use this:

<body id="background">
...
</body>
0

Give the z-index to negative value.

z-index: -10000

Hope 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.

0
<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;
}
0

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.

0

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

Edited by almostbob: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.