Hola a todos!
Pues estoy creando una web, que, de principio a fin, siendo cual sea la resolución la web quede anclada en el height, es decir, que se extienda desde top a bottom.
La cosa es que ya lo tengo perfecto, solo tengo un problema, para hacerlo usé tres divs, uno para el head (top), uno para el bottom, (bottom) y otro, que sería el centro (center), donde el fondo se repite para que no se note que son divs diferentes.
En head y bottom usé un position:absolute, y dependiendo de cada uno top:0 o bottom:0
El problema, es que a pesar de que center contiene a los dos divs, al estar en position:absolute, realmente no los contiene y por ello no repite el fondo, que es lo que me interesa.
Les dejo el code en CSS y el HTML de la parte en cuestión:
CSS:
Código CSS:
Ver original.top{
background-image:url(top.png);
height:271px;
width:651px;
z-index:999999;
position:absolute;
top:0px;
}
.bottom{
background-image:url(bottom.png);
background-position:bottom;
width:651px;
height:511px;
margin-bottom:0px;
position:absolute;
bottom:0px;
z-index:1px;
}
.center{
width:651px;
margin: auto;
height:100%;
z-index:2px;
background-image:url(fondo2.png);
background-repeat:repeat-y;
}
Y el HTML
Las imágenes nombradas en el CSS:
http://xooup.zxq.net/files/66e08a_imagenes.rar
Espero me puedan ayudar!