Reescalar imagen de fondo al tamaño de la ventana del navegador de forma proporcionada y al centro
Bienvenidos a Vertutoriales, en esta ocasión os traigo un pequeño truco en CSS para centrar una imagen y que se escale según el tamaño del navegador.
Lo interesante de este código es que se adapta según el ancho o el alto, es decir, la imagen tomará el ancho del 100% del navegador y despreciará el sobrante de altura (tanto por arriba como por debajo) o por el contrario, si la imagen es más ancha, se adaptará al 100×100 de altura y despreciará el ancho tanto por izquierda y derecha, siempre manteniendo una proporción exacta de la imagen.
Para estirar la imagen puesta en el fondo de manera responsive y centrada, no hay que escribir mucho código.El código en CSS es el siguiente:
body {
/* Ubicación de la imagen */
background-image: url(fondo.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Este código explicado:
Indicamos la url de la imagen, recuerda que tenga un tamaño apropiado para la totalidad de la pantalla:
background-image: url(fondo.png);
Hacemos que la imagen de fondo esté centrada vertical y horizontalmente en todo momento
background-position: center center;
Hacemos que la imagen no se repita:
background-repeat: no-repeat;
Hacemos que la imagen de fondo está fija en el viewport, de modo que no se mueva cuando la altura del contenido supere la altura de la imagen.
background-attachment: fixed;
El punto importante: reescalamos la imagen cuando se cambia el ancho de ventana del navegador
background-size: cover;
Listo!
Espero que os ayude!
