Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

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

background-size-content

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

background-size-cover

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.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.