hola agradeceria ayuda con manejo de capas y z-index

estoy usando una imagen con la propiedad z-index para una imagen de fondo y float para poner 2 capas que llenen los espacios negros de la imagen de fondo pero no queda http://bio-ingener2html.blogspot.com/

mis id son

#fondo{z-index:-1;width:100%;position:relative;z-index:-1;}

#baner1{float:left;background-color:green; width:24%;height:190px;margin-left:0;text-align:left;}

#baner2{float:right;background-color:green; width:25%;height:190px;margin-right:0;text-align:center;margin-top:0;}


y en el body

<div id='baner1'><ul>
<li>contacto</li>
<li>como llegar</li>
<li>requisitos de ingreso</li>
</ul></div>

<div id='baner2'><h1>reservad<br/>publici</h1></div>

<img id='fondo' src='http://i.minus.com/iVl42JhG3cklj.jpg'/>

Si entiendo bien,tu NO repites la imagen de fondo y esta no ocupa todo el width en una resolucion grande verdad?, lo correcto es que uses body{background-image:url(ruta); background-color:green} y posiciones la imagen y digas como se repite y listo ya lo tienes, encima creas los <div> y pones lo que quieras...

Pero si quieres o necesitas con z-index seria mas o menos asi:

#fondo{position:relative; z-index:1; background-image:url(imagen.png);  width:100%; height:100%}
#baner1{position:relative; z-index:2; float:left; background-color:green; width:24%; height:100%; margin-left:0; text-align:left; padding-left:10px}
#baner2{position:relative; z-index:3; float:right;background-color:green; width:25%;height:100%;margin-right:0;text-align:center;margin-top:0;}

__________________________________________________________________________________________________

<div id="fondo">

<div id='baner1'>
<ul>
<li>contacto</li>
<li>como llegar</li> 
<li>requisitos de ingreso</li>
</ul>
</div>

<div id='baner2'>
<h1>reservad<br/>publici</h1>
</div>

</div><!--div fondo-->

y el resultado:

[contenido no disponible]