CSS background bottom 100%
En algunas ocasiones se diseña una imagen que ‘cierra’ nuestra página. En tanto los contenidos producen una altura para su contenedor (div) mayor que la ventana de lectura, no hay problema: si hacemos correr la barra de desplazamiento hacia abajo, el background-bottom aparece en el lugar adecuado.
Pero esto no siempre sucede así: a veces la entrada, o toda la página, se nos quedan cortas, y la imagen de ‘cierre’ de nuestro diseño se nos subleva y aparece en mitad de la pantalla.
Para evitar esta circunstancia es posible emplear la estructura y el CSS que se muestra a continuación:
<html>
<head>
<style>
*{margin: 0; padding: 0;}
/* se establece una altura mayor que la pantalla para asegurar la aparición de la barra de desplazamiento vertical y evitar así el desplazamiento horizontal de la página según sea su altura */
body, html {height:100.1%;}
#pagina {
/* determina la imagen, su posición y tipo de repetición de la imagen de abajo */
background-image: url(fondo.gif);
background-repeat: repeat-x;
background-position: 0 100%;
/* firefox lee la altura mínima del div */
min-height:100%;
}
*html #pagina {
/* explorer necesita ayuda */
height:100%;
}
#cabecera {
/* establece la altura de la imagen: recuerda descontar los padding arriba y abajo de las etiquetas que contenga */
height: 70px;
/* determina la imagen, su posición y tipo de repetición de la imagen de arriba */
background-image: url(cabecera.gif);
background-repeat: repeat-x;
background-position: 0 0;
}
</style>
</head>
<body>
<div id='pagina'>
<div id='cabecera'></div>
<!-- contenido -->
</div>
</body>
</html>
Puedes ver cómo funciona en este ejemplo.
Para añadir el tiempo de lectura a cada artículo sigue estos pasos:
