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  lt div id  wrapper  gt       lt header gt           lt div id  logo  gt  lt  div gt           lt nav gt               lt ul gt                   lt li id  aboutNav  gt  lt a href  template html  gt home lt  a gt  lt  li gt                   lt li id  menuNav  gt  lt a href    gt menu lt  a gt  lt  li gt                   lt li id  specialsNav  gt  lt a href    gt specials lt  a gt  lt  li gt               lt  ul gt           lt  nav gt         lt  header gt       lt div id  content  gt          content  lt br gt  goes  lt br gt  here  lt br gt           lt a href  http   www google ca  target   blank  gt google lt  a gt       lt  div gt   lt  div gt   lt footer gt       lt div id  thumbsDesc  gt  lt  div gt       lt div id  thumbs  gt  lt  div gt   lt  footer gt       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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

[html] Div Background Image Z-Index Issue

Examples related to html

Examples related to css