CSS Z-Index – Creating an adjustable background image for a page

I have been messing around with z-index recently for styling documents. I have been meaning to use it as a much more efficient way of creating cool backgrounds but it’s always been a bit of a mystery!

It still seems a bit wierd – I don’t think it is supported very well in new browsers (??) the best I could do was to set a div of zero height and width with auto margins and then put the image into this div, giving in a z-index of -1, position absolute (it would only work with absolute) and then use ‘top’ and ‘left’ to position the image underneath the rest of the document. The auto margin div resets the 0,0 point to the top dead centre of the page regardless of width.

So in the document:

<div id="container">
<img src="images/image.jpg" border="0" alt="" />
</div>

And the CSS:

#container {
 position:relative;
    width: 0px;
 height:0px;
 margin:00px auto 0;
 text-align:left;
}
img {
 z-index:-1;
 position:absolute;
 top:50px;
 left:-100px;
}

Which gives me a nice big background logo for the company page that does not interfere with the layout of anything on top of it.