Problema con background-image y z-index

[quisoc]

Hola,
tengo un problema con el diseño de la cabecera. Tengo varios divs con una imagen de fondo, y no consigo que se pongan una encima de la otra correctamente.
La estructura seria:

<div FONDO 1>
<div FONDO MENU>
<div FONDO 2>
<div>
<div CONTENIDO>


FONDO 1 es una imagen que ocupa todo el espacio, con z-index: 10

FONDO MENU es un fondo que tambien ocupa todo, aparece justo cuando termina FONDO1 , con z-index: 15

FONDO 2 tambien que ocupa todo, y deberia salir por debajo de FONDO MENU, tiene z-index: 10

CONTENIDO tiene un ancho fijo, y deberia salir por debajor de FONDO2, tiene z-index: 5

el problema es que fondo2 y contenido salen encima de sus predecesores, y no debajo.

¿Tiene solución esto?

[exxqizofrenicoo]

como cierran esas etiquetas ?
porque varia mucho segun como las cierres.

[TheDark03]

Hola.. para ayudarte a veces no basta con solo explicarlo... tienes q poner el codigo.. el css y el html

Saludos

[quisoc]

Iniciado por exxqizofrenicoo

como cierran esas etiquetas ?
porque varia mucho segun como las cierres.

Cierran asi:

Código:

<div FONDO 1>
    <div FONDO MENU></div>
</div>

<div FONDO 2></div>

<div>
    <div CONTENIDO></div>
</div>

[TheDark03]

y repito pon el css... y a todo lo q involucre seria mas facil asi!

Saludos

[exxqizofrenicoo]

ponenos el css porque si tan solo pones en el css imagenes es imposible que fondo2 y contenido aparescan arriba de fondo1 y fondo menu.
asi como vos los muestras colocando unas imagenes en cada div aparece fondo1 y fondo menu por encima, luego debajo fondo2 y luego mas abajo contenido.
aplicando tan solo algo asi:

#fondo1{height:400px;background-image:url(imagen.jpeg);background-repeat:no-repeat;}
#fondoMenu{height:100%;background-image:url(imagen.jpeg);background-repeat:no-repeat;}
#fondo2{height:200px;background-image:url(imagen.jpeg);background-repeat:no-repeat;}
#contenido{height:200px;background-image:url(imagen.jpeg);background-repeat:no-repeat;}


<div id="fondo1">
<div id="fondoMenu"></div>
</div>

<div id="fondo2"></div>


<div id="contenido"></div>