Div Imagen de fondo Z-Index Problema

Question

Estoy intentando que la imagen de fondo de mi contenido aparezca detrás del encabezado y el pie de página. Actualmente, la parte superior del fondo del contenido está sobresaliendo en el encabezado, y se puede ver que la parte inferior ha cubierto ligeramente el pie de página (observe el ligero cambio del color del borde del pie de página). He intentado configurar aplicando z-index:-100; al contenido que funcionó pero que también hace que el texto no se pueda seleccionar. Luego intenté aplicar z-index:1; al contenido, pero eso no hizo que el contenido apareciera debajo del encabezado/pie de página.

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

Para resolver el problema, se utiliza el índice z en el pie de página y el encabezado, pero se olvidó de la posición, si un índice z es ser utilizado, el elemento debe tener una posición:

Añadir a el pie de página y el encabezado de este CSS:

position: relative; 

Editado:

También notamos que la imagen de fondo en la #backstretch tiene un índice z negativa, no use eso, algunos navegadores ponen muy raro ...

Quitar desde el #backstretch:

z-index: -999999; 

leer un poco sobre Z-Index here!

Answer 2

Para z-index para trabajar, también hay que darle una posición:

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

Answer 3

Fije su cabecera y el pie de página a la posición "absoluta" y que debe hacer el truco. Espero que ayude y buena suerte con su proyecto!