1 reply [Last post]
Last seen: 15 years 16 weeks ago
Joined: 2005-10-10
Posts: 1
Points: 0

Hi there everyone...

I have used the z-index to position 2 background images (one tiled one static) on my page. However, the static image (the one of the leaves) is not showing up in firefox... it looks great in safari.

This is what I am using:

body.bg {
text-align: left;
background-image: url(images/bg.gif);
text-align: left;
z-index: -2;

.leaves {
background-image: url(images/leaf.jpg);
background-repeat: no-repeat;
position: absolute;
z-index: -1;
height: 500px;
width: 500px;

- - -

Also, in IE the forums suddenly fly off to the top left hand side of the page... argh!

Here is the link: http://www.debunk.co.nz/cd05/forums/

It is supposed to look like this: http://www.debunk.co.nz/screenshot.jpg

Any help would be greatly appreciated!

Hugo's picture
Last seen: 6 years 3 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806


Start with a full DTD for standards mode then use positive z-index values ensure that the parent container for the images creates a new stacking context with position relative or absolute then z-index the images from the parents zero base.


Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me