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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
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; }
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!
Tags :

Leave a comment

Sign in to post your comment or sine up if you dont have any account.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Tu software de gestión


Últimas preguntas:

Logo Dkreativo
Vertutoriales