Actualizado 23-Sep: Arreglado fallo en IE8
Hace unos meses, estuve trabajando en la web de Amapola Films, y surgió un reto interesante: cómo usar una imagen de fondo que permaneciese fija y tuviera una escala correcta.
Para este ejemplo, he elegido la siguiente imagen de fondo:
La imagen de fondo que usaremos de ejemplo
Prueba #1: usando CSS
Normalmente, para poner una imagen de fondo usaría CSS, pero en este caso queremos que ocupe toda la pantalla independientemente del tamaño del navegador.
He reducido la página al mínimo para poder centrarnos en el fondo, así que el contenido del body sería:
<div id="content"> <h1>Prueba 1: usando CSS</h1> </div>
Y el CSS correspondiente:
body {
background: url(images/background.jpg) no-repeat center top;
}
Como se puede ver en la siguiente captura, la imagen es mucho más grande que la ventana del navegador y no se muestra correctamente
Primer intento: FAIL
La propiedad background de CSS es bastante limitada para este caso y no nos permite escalar la imagen. Si queremos ajustar la anchura o altura, tendremos que usar el elemento img
Prueba #2: imagen en HTML
Esta vez, en lugar de ponerle un fondo al body, vamos a insertar una imagen en el documento e intentar enviarla al fondo.
<img id="bg" src="images/background.jpg" alt="Fondo" /> <div id="content"> <h1>Prueba 2: imagen de fondo</h1> </div>
Para esto, aplicaremos un posicionado fijo a la imagen, y le pondremos el z-index a -1, para enviarla al fondo. También especificamos que la imagen se ajuste al ancho de la pantalla
#bg {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
Segundo intento, parece que funciona
Con un navegador apaisado se ve decente
El problema viene a la hora de redimensionar. Si por cualquier motivo, la ventana es mas ancha que larga se produce el siguiente efecto.
Segundo intento: FAIL
Tras ver esto, se me ocurrió brevemente poner también la altura al 100%, pero eso deformaría la imagen. Sólo nos queda Javascript
Prueba 3: Javascript al rescate
La idea principal es averiguar mediante javascript las proporciones de la pantalla y, dependiendo de estas, ajustar la anchura o la altura, dejando que el navegador elija la otra medida automáticamente.
El código HTML y CSS es similar al anterior, sólo que esta vez añadiremos el siguiente Javascript (depende de jQuery aunque se podría adaptar fácilmente):
function updateBackground() {
screenWidth = $(window).width();
screenHeight = $(window).height();
var bg = jQuery("#bg");
// Proporcion horizontal/vertical. En este caso la imagen es cuadrada
ratio = 1;
if (screenWidth/screenHeight > ratio) {
$(bg).height("auto");
$(bg).width("100%");
} else {
$(bg).width("auto");
$(bg).height("100%");
}
// Si a la imagen le sobra anchura, la centramos a mano
if ($(bg).width() > 0) {
$(bg).css('left', (screenWidth - $(bg).width()) / 2);
}
}
$(document).ready(function() {
// Actualizamos el fondo al cargar la pagina
updateBackground();
$(window).bind("resize", function() {
// Y tambien cada vez que se redimensione el navegador
updateBackground();
});
});
Podemos ver que en este caso, el fondo se muestra correctamente sea cual sea el tamaño de la ventana.
Cuadrado: OK
Horizontal: OK
Vertical: OK
Demo
Podéis ver los ficheros utilizados en:
