CSS background-images and Z-Index problem
- by dscher
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;
}
Thanks.
