Cómo usar múltiples imágenes de fondo con CSS

Al desarrollar cualquier aplicación, el desarrollador debe mantener la interactividad de la aplicación. Hay varias características que pueden ayudar a atraer la atención del usuario, como colores, imágenes, GIF y más. Para agregar una imagen al sitio web, html ""La etiqueta se puede utilizar. Mientras que para agregar varias imágenes con CSS, el "imagen de fondoLa propiedad se usa con las URL de las imágenes.

Esta guía de estudio demostrará cómo usar imágenes de fondo con CSS. Vamos a empezar!

Cómo utilizar múltiples imágenes de fondo con CSS?

El CSS "fondo"La propiedad es una propiedad abreviada que contiene fondo, alcance de fondo, clip, imagen, repetición, origen, tamaño y propiedades de posición. La propiedad de fondo se puede utilizar para especificar las URL de múltiples imágenes. Esas imágenes se colocan y se establecen en consecuencia.

Tomemos un ejemplo en el que un elemento div contiene solo una imagen como logotipo de la página web, mientras que el segundo contiene tres imágenes.

Ejemplo: Agregar varias imágenes de fondo con CSS

En HTML, agregue un elemento div para el logotipo y especifique el nombre de la clase. Por ejemplo, lo llamamos "logo". El segundo div utiliza múltiples imágenes, por lo que la llamamos "múltiples imágenes". Sin embargo, puede especificar el nombre de clase según sus preferencias.

Html

En la siguiente sección, ajustaremos las imágenes utilizando la propiedad de fondo CSS.

Estilo "Logotipo" Div

.logotipo
Ancho: 100%;
Altura: 50px;
relleno: 5px;
margen: 5px;
tamaño de fondo: 100px;
Background-Repeat: sin repetición;
IMAGEN DE FINTER: URL (Images/Linux-logo.png);

El elemento div con la clase "logo"Se aplica con las siguientes propiedades:

• "ancho"La propiedad se utiliza para establecer el ancho del elemento en"100%".
• "altura"La propiedad se utiliza para establecer la altura del elemento en"50px".
• "relleno"La propiedad se utiliza para configurar el"5px"Espacio alrededor del contenido especificado del elemento.
• "margenSe utiliza la propiedad para establecer el "5px"Espacio alrededor del elemento.
• "tamaño de fondo"La propiedad establece el tamaño de la imagen de fondo del elemento como"100px".
• "repetición"Con el valor"sin repetición"Muestra el fondo solo una vez.
• "imagen de fondoLa propiedad se utiliza para especificar la URL de la imagen.

Estilo "Múltiples imágenes" Div

.IMAGEN MÚLTIPLES
Ancho: 90%;
Altura: 45VH;
Margen: 1px Auto;
relleno: 20px;
tamaño de fondo: 150px;
Color de fondo: RGB (157, 154, 151);
IMAGEN DE ACTUALO: URL (Imágenes/Oficina.PNG), URL (imágenes/html.PNG), URL (imágenes/computadora portátil.png);
Background-Repeat: sin repetición, sin repetición, sin repetición;
Posición de fondo: izquierda, centro, derecha;

Ahora, diseñe el otro contenedor de la siguiente manera:

• "color de fondo"La propiedad especifica el color del fondo del elemento.
• "imagen de fondo"La propiedad especifica múltiples URL de imagen.
• "repeticiónLa propiedad establece valores para las imágenes en una secuencia de las imágenes especificadas en la propiedad de imagen de fondo. Ambas imágenes están configuradas como no repetitivas, significa que se mostrarán en el navegador solo una vez.
• "posición de fondo"Ajusta la posición de la imagen en la secuencia de las imágenes especificadas por la propiedad de imagen de fondo. La primera imagen se establecerá en el lado izquierdo, la segunda en el centro y la tercera se colocará en el lado derecho.

Al proporcionar el código proporcionado anteriormente, el resultado en el navegador se verá así:

De esta manera, podemos ajustar la posición de múltiples imágenes con CSS.

Conclusión

Para que la aplicación sea entretenida e interactiva, los desarrolladores usan diferentes imágenes y colores. Podemos establecer múltiples imágenes con propiedades de fondo CSS, como posición de fondo, repetición de fondo, tamaño de fondo y más. Este manual ha demostrado el uso de múltiples imágenes de fondo con ejemplos de CSS.