Escale la imagen de fondo para que quepa en la ventana con CSS

Este artículo nos enseñará a escalar y estirar la imagen de fondo con CSS. A veces, necesitamos escalar la imagen de fondo de acuerdo con la ventana o el tamaño de la ventana de la pantalla, y eso es lo que haremos en este artículo.

Use la propiedad CSS background-size para escalar la imagen de fondo para que quepa en la ventana

Los programadores pueden usar la propiedad CSS background-size para administrar el tamaño de la imagen de fondo. Si usamos la cubierta como un valor de la propiedad background-size de CSS, podemos estirar la imagen de fondo de acuerdo con el tamaño de la ventana del usuario.

Por ejemplo, hemos creado el elemento <h1> y hemos agregado algo de texto para mostrarlo. Además, hemos establecido la imagen de fondo usando la propiedad background de CSS para todo el cuerpo.

Hemos pasado 4 valores diferentes a la propiedad background. El primer valor representa la URL de la imagen de fondo.

El no-repeat muestra que la imagen de fondo no debe repetirse y debe mostrarse solo una vez en la pantalla. El valor center representa que la imagen de fondo debe estar en el centro de la pantalla, y fixed representa que el tamaño de la imagen de fondo debe ser fijo y no se permite el desplazamiento.

Además, hemos utilizado la propiedad background-size: cover en el CSS, que nos permite escalar la imagen según el tamaño del elemento cuerpo.

Código HTML:

<h1 class="text">This is the demo text.</h1>

Código CSS:

body {
  background: url(https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: cover;
}

Producción:

En la imagen de salida anterior, los usuarios pueden ver que la imagen está estirada y una sola imagen funciona como fondo para la página web.

También podemos usar 100% como un valor de la propiedad background-size de CSS para ajustar la imagen de fondo de acuerdo con la ventana gráfica de la pantalla del usuario, como se muestra en el siguiente ejemplo.

Código CSS:

body {
  background: url(https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: 100%;
}

<h1 class="text">This is the demo text.</h1>

Producción:

Hemos aprendido dos métodos diferentes para escalar la imagen de fondo usando CSS solo en este artículo. Los usuarios pueden elegir cualquier método según su comodidad.