33

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

//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;
}

3 Answers 3

77

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!

4
  • backstretch is a jQuery plugin I downloaded. Should I be tinkering around with their code?
    – Jon
    May 8, 2012 at 23:30
  • 1
    Depends, the issue with negative z-index pops up on older browsers... if you need to support them, you should :) Personally, I had problems with that solution, and had to organize my elements stack only with positive values!
    – Zuul
    May 8, 2012 at 23:33
  • For so long I was using display: block; to get z-index to work properly with imgs ... thank you so much for sharing this...huge help!
    – twk
    Aug 18, 2018 at 9:26
  • Very useful to know, this solved my problem too. Didn't know about relationship between position and z-index Jan 24, 2020 at 13:39
8

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;
}
0
2

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

2
  • Doesn't have to be absolute. Can also be relative.
    – Steve
    May 8, 2012 at 23:23
  • @Steve - yep, but you have to set it to relative and care about z-index. (in this case) I just think it's a lot easier to set it to absolute and don't care about the z-index. May 8, 2012 at 23:26

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.