Member Avatar for checker 
<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
  • 126 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for nileshgr

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

Then use this:

<body id="background">
...
</body>
Member Avatar for ko ko

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.

Member Avatar for BlakeTallos 
<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;
}
Member Avatar for laura_ci

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.

Member Avatar for almostbob

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 because: n/a
Member Avatar for MidiMagic

You can't put a unit on 0 if you expect it to work with all browsers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.