Introducción

Podemos determinar el tamaño de la imagen de fondo con la ayuda de la propiedad background-size. Podemos hacer que la imagen quede izquierda, estirada y ajustada al espacio disponible. Hay muchísimas sintaxis para la implementación de la propiedad de tamaño de fondo. Podemos establecer la propiedad de tamaño de fondo con la ayuda de valores y valores unitarios.

En valores unitarios, podemos definir la propiedad de tamaño de fondo en forma de porcentajes o píxeles. También podemos definirlo con la ayuda del valor global. Podemos implementarlo con la ayuda del valor global mediante la ayuda del siguiente fragmento.

¿Qué tan grande es este monitor?

 .card-hero inherit 

Entendamos brevemente el tema.

Valores de palabras clave

Podemos utilizar el valor de la palabra clave con la ayuda de cubrir y contener. Podemos cambiar el tamaño del fondo con la ayuda de estos valores de palabras clave.

1. Portada:

Podemos establecer el tamaño del fondo con la ayuda de la palabra clave de portada. Si definimos el tamaño del fondo como portada, entonces la imagen encajará en el contenedor sin dejar espacio. También mejorará la imagen para que se ajuste a la pantalla.

Entendamos esto con la ayuda del siguiente ejemplo.

Ejemplo 1:

'algoritmo de prim'

Código:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Producción

Explicación:

En el código anterior, se combinan tres imágenes de fondo utilizando la propiedad background-image. La propiedad background-size especifica los tamaños de cada imagen de fondo: 30% de ancho para la primera imagen, 40% de ancho para la segunda imagen y cobertura para la tercera imagen. La propiedad de posición de fondo se establece de forma diferente para cada imagen para crear una composición equilibrada.