4.1 Principios Básicos
CSS permite usar múltiples imágenes de fondo en un solo elemento, lo que abre un amplio espectro de posibilidades
para crear efectos visuales complejos e interesantes. Con la propiedad background-image y sus propiedades relacionadas
se pueden definir varias capas de imágenes de fondo, controlando su orden, posición y otras características.
Sintaxis
Para definir múltiples imágenes de fondo se utiliza una sintaxis donde las diferentes imágenes se enumeran separadas por comas:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Propiedades para configurar cada nivel
Además de background-image, para configurar cada capa de la imagen de fondo se utilizan las siguientes propiedades,
que también admiten valores múltiples, separados por comas:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Orden de las capas
Las imágenes se disponen en capas en el orden en que se enumeran, donde la primera imagen está más cerca del usuario y la última más cerca del fondo del elemento.
4.2 Superposición de Imágenes
Superposición simple de imágenes.
Ejemplo de uso:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg">Fondo Multinivel</div>
</body>
Explicación del código:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: establece dos imágenes de fondobackground-position: center, top left;: centra la primera imagen y coloca la segunda imagen en la esquina superior izquierdabackground-repeat: no-repeat, no-repeat;: desactiva la repetición para ambas imágenes
4.3 Uso de Múltiples Imágenes
Uso de múltiples imágenes de fondo con diferentes tamaños.
Ejemplo de uso:
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes">Fondo Multinivel con Tamaños</div>
</body>
Explicación del código:
background-size: 50% 50%, 30% 30%;: escala la primera imagen al 50% del ancho y alto del elemento, y la segunda imagen al 30% del ancho y alto del elemento
4.4 Imágenes Transparentes
Superposición de imágenes con transparencia.
Ejemplo de uso:
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<body>
<div class="multi-bg-opacity">Fondo Multinivel con Transparencia</div>
</body>
Explicación del código:
background-size: cover, 50%;: escala la primera imagen para cubrir todo el elemento, y la segunda imagen al 50% del tamaño del elemento::before: el pseudo-elemento añade una capa negra semi-transparente sobre las imágenes de fondo
4.5 Recorte del Fondo
Uso de otras propiedades con múltiples imágenes de fondo.
background-origin y background-clip
Estas propiedades controlan el área donde se muestra la imagen de fondo y el área de recorte del fondo.
Ejemplo de uso:
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
<body>
<div class="multi-bg-origin-clip">Fondo Multinivel con background-origin y background-clip</div>
</body>
Explicación del código:
background-origin: padding-box, content-box;: la primera imagen comienza desde el borde interno del padding, la segunda imagen desde el contenido del elementobackground-clip: border-box, padding-box;: la primera imagen se recorta en el borde externo, la segunda imagen en el borde interno del padding
GO TO FULL VERSION