[html] Div Background Image Z-Index Issue

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

enter image description here

<div id="wrapper">
        <div id="logo"></div>
                <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>
    <div id="content">
        content <br> goes <br> here <br>
        <a href="http://www.google.ca" target="_blank">google</a>
    <div id="thumbsDesc"></div>
    <div id="thumbs"></div>

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;

This question is related to html css

The answer is

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; 


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!

Set your header and footer position to "absolute" and that should do the trick. Hope it helps and good luck with your project!

For z-index to work, you also need to give it a position:

header {
    width: 100%;
    height: 100px;
    background: url(../img/top.png) repeat-x;
    z-index: 110;
    position: relative;