jueves, 5 de marzo de 2020

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)

No hay comentarios:

Publicar un comentario

Cambiar tamaño de fuente al reducir la ventana (HTML / CSS)

Cambiar el tamaño del texto a medida que se reduce el tamaño de la ventana (HTML5 / CSS3)   . container { border : solid 1px blue ; ...