Ultima revisión 29/10/2012

Como hacer que la imagen de fondo se adapte al tamaño de la pantalla con CSS3

En CSS2.1, lás imágenes de fondo se aplicaban a un recipiente o DIV conservado sus dimensiones fijas. Afortunadamente, CSS3 introduce la propiedad background-size que permite que los fondos de pantalla sean estirados o distorsionados.

Cambiando de tamaño varios fondos

Por defecto, la anchura y la altura del fondo o background se establece a auto que mantiene las dimensiones originales de la imagen.

Sin embargo, podemos cambiar el tamaño de la imagen de fondo a un nuevo tamaño utilizando mediciones absolutas como px, em, cm, ...

background-size: width height;  
/* o tambien */
background-size: 100px 200px; 
/* o incluso con porcentajes */
background-size: 50% auto;   

Escalar al tamaño máximo

La propiedad background-size también acepta contener palabras clave. Por ejemplo contain que hace que la imagen se aumentará o disminuirá proporcionalmente, pero la anchura y la altura no exceda las dimensiones del contenedor.

background-size: contain;  

Rellenar todo el fondo

La propiedad background-size también acepta la palabra clave cover que lo que hace es que la imagen se ampliará para ajustarse a todo el recipiente, pero si que tiene una relación de aspecto diferente, la imagen será recortada.

background-size: cover;  

Cambiando de tamaño varios fondos

Se pueden indicar varios fondos en la propiedad background y después en background-size los tamaños

background:
    url("bg1.png") 60% 90% no-repeat,  
    url("bg2.png") 40% 50% no-repeat,  
    url("bg3.png") 10% 20% no-repeat #393;  
background-size: 250px 200px, auto, 150px;  

Compatibilidad en los navegadores

Las últimas versiones de todos los navegadores soportan background-size sin prefijo o hack pero nosotros recomendamos que uséis los hacks más estardars (-moz-, -o-, -xv-, -ms-, -webkit-, -khtml-, ...) según proceda.

Internet Explorer 8 e inferiores no son compatibles con background-size. Se podría utilizar un filtro de IE para emular contener y cubrir, pero no es posible cambiar el tamaño de las imágenes de fondo sin tener que recurrir a jQuery, por ejemplo y eso hace el código más sucio.