Buenas,
Estoy rediseñando nuestra web y quiero hacer algo como
De momento tengo un esquema basado en:
Código HTML:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative; /* posicionamiento absoluto del footer */
}
#footer {
height: 50px; /* Alto del footer */
position: absolute;
bottom: 0; /* pegarlo abajo */
left: 0;
width: 100%; /* todo lo largo que se pueda */
}
#content {
padding-bottom: 50px; /* Igual que el alto del footer footer */
}
El cuerpo, así:
Código HTML:
<body>
<div id="wrapper">
<div id="header">Encabezado</div>
<div id="content">Contenido</div>
<div id="footer">Footer</div>
</div>
</body>
Quiero que el pié sean los edificios pero que la capa de contenido se meta detrás.... como en la imagen.
Estaba pensando en cortar el trozo de edificios y ponerlo como fondo de la capa principal alineado abajo (background url (...) bottom center;) pero no estoy seguro que siempre se vea correlativo al resto del footer, el cual tampoco se me ocurre nada para que el fondo del footer quede arriba y se ajuste a ese fondo alineado abajo del contenedor y los edificios no parezcan discontinuos...
Alguna idea? imagino que no he sido muy claro xD pero es la mejor manera que se me ocurre de explicarlo...