CSS background-images and Z-Index problem

Posted by dscher on Stack Overflow See other posts from Stack Overflow or by dscher
Published on 2010-03-29T00:18:11Z Indexed on 2010/03/29 0:23 UTC
Read the original article Hit count: 671

Filed under:

Hope someone has an easy answer on this. I have a header image which is just a 75px high gradient with a fade on the bottom. I have it set as the background image on my header and I want to throw in a left-sidebar on my page. There is a transparency on the header image and when I have my sidebar I can't get it to sit behind the header. You can see in this screenshot:

link text

The green sidebar won't "sit" behind the header. I have the header z-index set to 99 and the sidebar to 1. I tried the reverse to make sure I didn't mix up my numbers but that didn't work. Both are absolutely positioned. I'm attaching their CSS selectors in the hopes someone has an easy answer. Am sure I'm missing something basic:

div.header { z-index: 99; background: transparent; background-image: url(images/header_bg.png); position: absolute; height: 85px; width: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; }

div#leftsidebar { height: 400px; border-right-style: dashed; border-right-width: 1px; z-index: -1; margin-top: 75px; width: 200px; position: absolute; background-color: #66ff66; }


© Stack Overflow or respective owner

Related posts about css

Related posts about css-selectors