Enigma: Background arriba y otro abajo con div

[jmoya]

Estoy intentando realizar un fondo de pantalla con 2 backgrounds.

las imágenes son png con transparencias y la idea es que en la cabecera aparezca la imagen hasta 3/4 de pantalla, rellenado con el color de fondo, y luego otra imagen que se posicione abajo. Esto es necesario ya que el contenido de la página es dinámico.

Lo he intentado con 2 DIV del el mismo tamaño y que uno cargue una imagen en top y background #fff y el otro cargue la imagen en bottom sin color de fondo.

Código:

div#wrapper1 {/* CONTENEDOR CENTRAL, CARGA UN FONDO POSICIONADO ARRIBA Y MARCA EL COLOR BASE DEL BACKGROUND */
	min-width:1000px;
	min-height:100%;
	background: #FFFFFF url("../img/bg_top.png") left top repeat-x;
	}
div#wrapper2 { /* IGUAL QUE WRAPPER1 UTILIZADO PARA PONER LA IMAGEN DE FONDO EN EL PIE */
	height:100%;
	background: url("../img/bg_bottom.png") left bottom repeat-x;
	}

Al carguar los div lo hago de la siguiente manera

Código:

<div id="wrapper1">
	<div id="wrapper2">
		<div id="cabecera">Contenido de la web.....</div>
        </div>
</div>

Muchas gracias.

[Ruben_JD]

Hola jmoya, si te entendi bien quieres utilizar dos fondos en tu web, porque no intentas con darle un fondo al html y otro al body

CSS:
html{
margin:0 auto;
min-width:1000px;
min-height:700px;
background: #FFFFFF url("../img/bg_top.png") repeat-x center top fixed;
}
body{
margin:0 auto;
min-height:700px;
background: url("../img/bg_bottom.png") repeat-x center;
}
Espero que te sirva.
Suerte