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

Puede ser interesante para nuestro diseño web y sobretodo si queremos hacer páginas multiplataforma que se adapten al tamaño de pantalla de los distintos dispositivos (diseño web adaptativo) poner una imagen de fondo que se adapte al tamaño y resolución de la pantalla del usuario.

La propiedad “background-size: cover” nos permite aumentar el tamaño de la imagen de fondo, en lugar de que nos muestre la imagen varias veces.

Para ello, solo debemos utilizar la siguiente instrucción CSS:

body{
background: url(imagen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Con estos parámetros la función será válida para todos los navegadores (Cross-browsing)

¿Práctico no? Adiós al Javascript para hacer este tipo de cosas, es lo bueno que tiene el CSS3

24 comentarios sobre “Como hacer que la imagen de fondo se adapte al tamaño de la pantalla con CSS3”

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>