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: 707
css
|css-selectors
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:
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.
© Stack Overflow or respective owner