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
No hay comentarios:
Publicar un comentario