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.