Div Background Image Z-Index Issue

Question

I am trying to get the background image of my content to appear behind the header and footer. Currently, the top of the content's background is sticking out onto the header, and you can see that the bottom has slightly covered the footer (notice the slight change of the footer's border colour). I have tried setting applying z-index:-100; to content which worked but also makes the text unselectable. I then tried applying z-index:1; to content, but that did not make the content appear under the header/footer.

link to website

//html <div id="wrapper">     <header>         <div id="logo"></div>         <nav>             <ul>                 <li id="aboutNav"><a href="template.html">home</a></li>                 <li id="menuNav"><a href="">menu</a></li>                 <li id="specialsNav"><a href="">specials</a></li>             </ul>         </nav>       </header>     <div id="content">         content <br> goes <br> here <br>         <a href="http://www.google.ca" target="_blank">google</a>     </div> </div> <footer>     <div id="thumbsDesc"></div>     <div id="thumbs"></div> </footer>    //css header {     width: 100%;     height: 100px;     background: url(../img/top.png) repeat-x;     z-index: 110; }  #wrapper #content {     color: #FFFFFF;     background: url(../img/body.png) repeat-y;     width: 524px;     padding: 25px 30px 25px 30px;     position: absolute;     bottom: 100px;     top: 90px;     margin: 0 0 0 150px;     z-index: 1; }  footer {     margin: -107px 0 0 0;     width: 100%;     height: 107px;     background: url(../img/bottom.png) repeat-x;     z-index: 100; } 

Answer 1

To solve the issue, you are using the z-index on the footer and header, but you forgot about the position, if a z-index is to be used, the element must have a position:

Add to your footer and header this CSS:

position: relative;  

EDITED:

Also noticed that the background image on the #backstretch has a negative z-index, don't use that, some browsers get really weird...

Remove From the #backstretch:

z-index: -999999; 

Read a little bit about Z-Index here!