CSS - Do I want z-index?

[ChicoWeb]

Hi guys...

I'm in need of some advanced CSS help here :) How can I get this damb background image to appear behind my layout? I've tried z-index, which I thought would do the trick, but to no avail. It should be fairly recognizable, but it's the gray bar that is going in front of my layout right now.

Here is what I have so far.
http://cwd.dyndns.org/wsg/index.html
I don't believe it's valid as IE6 for PC doesn't like it.

This is what it's supposed to look like.
http://cwd.dyndns.org/layout2.jpg

Thanks in advance!!

[janitorC7]

I;m half asleep in saying this, but I think that you are looking at this the wrong way, rather that you have to worry about floating the top layer over the backround. Try a different wrapper mabye, if I can, tomorrow maby I'll try it

[iGav]

After a quick scan through your code, you've only specified 1 z-index, and that's on the actual 'background' image, and that is why the image is appearing above everything else.

I think (I've only had a quick scan through) that you've put your layout in a div called wrapper, as long as that div contains everything that you want to appear on top of that background image, assign a z-index to that div.

#wrapper {
margin: 0px auto;
width: 750px;
background-color: #505050;
border-right: #494949 5px solid;
border-left: #494949 5px solid;
z-index: 2;
}

Should solve the problem.

[ChicoWeb]

After a quick scan through your code, you've only specified 1 z-index, and that's on the actual 'background' image, and that is why the image is appearing above everything else.

I think (I've only had a quick scan through) that you've put your layout in a div called wrapper, as long as that div contains everything that you want to appear on top of that background image, assign a z-index to that div.

#wrapper {
margin: 0px auto;
width: 750px;
background-color: #505050;
border-right: #494949 5px solid;
border-left: #494949 5px solid;
z-index: 2;
}

Should solve the problem.

Tried this, no luck.

[iMeowbot]

Try z-index: -1 for #background-center

[iGav]

Tried this, no luck.

I forgot to add (told you I scanned through the code), you need to specify positioning to apply the z-index. e.g. Absolute, relative etc.

For example.

#wrapper {
position: absolute;
margin: 0px auto;
width: 750px;
background-color: #505050;
border-right: #494949 5px solid;
border-left: #494949 5px solid;
z-index: 2;
}

[iMeowbot]

I forgot to add (told you I scanned through the code), you need to specify positioning to apply the z-index. e.g. Absolute, relative etc.
Absolute positioning screws up the centering, of course. There really isn't a need to apply a z-index to that element, it has one (0) by default.

[iGav]

Absolute positioning screws up the centering, of course. There really isn't a need to apply a z-index to that element, it has one (0) by default.

Good point, I didn't bother resizing the browser window to realise it's a centering layout.

[ChicoWeb]

I forgot to add (told you I scanned through the code), you need to specify positioning to apply the z-index. e.g. Absolute, relative etc.

For example.

#wrapper {
position: absolute;
margin: 0px auto;
width: 750px;
background-color: #505050;
border-right: #494949 5px solid;
border-left: #494949 5px solid;
z-index: 2;
}

Right on. I used relative and had to define where to start it , left, as IE6 was fuxing it.

http://cwd.dyndns.org/wsg/index2.html

Thanks guys!