z-index, problemas con gif o png

[guillegm]

Buenas gente;

tengo 3 capas:

Código:

body {
background:url(../img/fons.gif) center repeat-y;
text-align:center;
z-index:3;
}

#centrarcapes{
width:900px;
margin:0 auto;
text-align:left;
margin-top:-50px;
z-index:4;
}

#capadarrera{
position:relative;
top:175px;
width:100%;
height:50px;
background-color:#564b18;
}

y me gustaria que me quedase asi:

y esto es lo que consigo

http://www.thewilfamily.com/prueba/prueba.html

No consigo que capa "capadarrera" quede por detrás de body ni de "centrarcapes".
He probado con la propiedad z-index, pero no funciona bien, me oculta completamente la capa "capadarrera" y no se muestra....

Es cosa del gif que hace de fondo en el body? o que hago mal?

Gracias a tod@s por vuestro tiempo

[juaniquillo]

te sugiero que uses una imagen pequeña imagen (de el alto que quieras y dos pixels de ancho) en el body y la repitas horizontal. De esa forma no tienes que tener ese div extra (capadarrera).

[guillegm]

Vale, la puedo hacer más pequeña de alto, pero no de ancho, ya que el ancho hace de interior del contenedor para el texto. Pero, ¿en que formato (gif, png, jpg) pongo el background del body para que me transparente la capa "capadarrera"?

Mi css ---> http://www.thewilfamily.com/prueba/medias/css/layout.css

Muchas gracias

[juaniquillo]

puede ser en cualquier formato ya que no va a tener transparencia.

[Mikmoro]

Hola, Guillegm.
Yo diría que el problema es el siguiente: tienes el gráfico de la sombra de tu página como fondo de la etiqueta body, y estás usando una caja (capadarrera), que desborda por los laterales. Pues bien, la cosa es que no creo que con z-index puedas llevar una caja detrás del body porque en ese caso desaparecerá del todo, y si lo consiguieras, como la sombra no es transparente, tapará esa zona de blanco sombreado.

Lo primero que necesitas para conseguir el efecto que buscas es que la sombra sea transparente, o bien, hacer un gráfico con la parte verde que desborda por los laterales (con su trocito de sombra), y colocarla de fondo del body , haciendo un contenedor principal que sea quien tenga la sombra de fondo.

Espero haberme explicado bien.

Mikel.

[guillegm]

Iniciado por Mikmoro

Hola, Guillegm.
Yo diría que el problema es el siguiente: tienes el gráfico de la sombra de tu página como fondo de la etiqueta body, y estás usando una caja (capadarrera), que desborda por los laterales. Pues bien, la cosa es que no creo que con z-index puedas llevar una caja detrás del body porque en ese caso desaparecerá del todo, y si lo consiguieras, como la sombra no es transparente, tapará esa zona de blanco sombreado.

Gracias por la explicación, entiendo el problema.

Iniciado por Mikmoro

Lo primero que necesitas para conseguir el efecto que buscas es que la sombra sea transparente,

con un png, y, poniendolo de fondo en el body? o con un gif? (lo digo por iexplore)

Iniciado por Mikmoro

o bien, hacer un gráfico con la parte verde que desborda por los laterales (con su trocito de sombra), y colocarla de fondo del body , haciendo un contenedor principal que sea quien tenga la sombra de fondo.

pero solo necesito que se vea el fondo verde en una parte del documento, en el top:175px; y si hago un gráfico con sombra y el fondo verde, se verá así en todo el body...
Entonces,
hago un png o gif con el fondo transparente? si la caja capadarrera desborda por los lados, entonces se verá el verde de capadarrera por los lados y el fondo de body por encima?

Muchas gracias a todos; en especial mikmoro y a juaniquillo

[Mikmoro]

Mira, creo que lo puedes solucionar de esta manera, tocando lo menos posible:

- coge este grafico


y súbelo a su sitio (/img/etc.)

- Ahora, cambia un par de clases en tu archivo layout.css:

#capadarrera { position: relative;
top: 175px;
width: 100%;
height: 50px;
background-color: rgb(86, 75, 24);
background-image: url(../img/fons1.png);
background-position: center top;
z-index: 0;
}

#contenidor { margin: -45px auto auto;
text-align: left;
width: 900px;
z-index: 10;
position: relative;
}

Pruébalo así. Creo que con esos 2 cambios bastará.
Ya contarás.
Mikel.

[guillegm]

Salgo de trabajar a las 15:00, cuando coma y llegue a mi casa lo pruebo, pero creo que he pillado tu solución.
Luego lo pongo en práctica. Muchas gracias por tu tiempo.

Edito: Ha funcionado, muchas gracias Mikmoro, por darme la solución y por hacermela entender.

un 10