Cómo usar una imagen de fondo que se adapte a la pantalla

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:

7 pensamientos en “Cómo usar una imagen de fondo que se adapte a la pantalla

  1. en internet explorer sucede lo siguiente:Detalles de error de página webAgente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)Fecha: Sun, 8 Aug 2010 17:16:17 UTCMensaje: Object doesn't support this property or methodLínea: 21Carácter: 3Código: 0URI: http://www.jorgebernal.es/s/scalablebg/3.html

  2. Hola Jorge, soy Aitor, escribo desde Sevilla.
    Te escribo por que va relacionado con el post, estoy intentando hacer mi primera web, con cuentagotas y de manera de autodidacta voy haciendo. Estoy terminando de pulir ciertos aspectos y uno de ellos es que el fondo ocupe el total de la pantalla sea cual sea el navegador con la cual sea visitada.
    Tengo dos archivos, el html y swf, mi pregunta es, como van interrelacionados y que tengo que variar y en que archivo.
    He buscado en mil páginas, todo el mundo tiene respuestas, normalmente de mala gana, pero nunca consigo que ello afecte de manera positiva en mi web.
    ¿Podrías ayudarme u orientarme?
    Muchas gracias y saludos.

  3. Hola Jorge

    gracias por el post…

    para realizar la prueba3, hay que añadir algo más en el .html?

Los comentarios están cerrados.