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!

Carlos Dk

Apasionado por la enseñanza y el SEO

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.