4.1 Basic Principles
CSS lets you use multiple background images on a single element, giving you a ton of options for creating complex and cool visual effects. With the background-image property and its related properties, you can set several layers of background images, controlling their order, position, and other characteristics.
Syntax
To set multiple background images, use a syntax where different images are separated by commas:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Properties for setting each level
Besides background-image, the following properties are used to set each layer of background image, which also support multiple values separated by commas:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Layer Order
Images are layered in the order they are listed, with the first image being closest to the user and the last one closest to the element's background.
4.2 Overlaying Images
Simple image overlaying.
Usage Example:
.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">Multi-Level Background</div>
</body>
Code Explanation:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: sets two background imagesbackground-position: center, top left;: centers the first image and places the second image in the top left cornerbackground-repeat: no-repeat, no-repeat;: disables repetition for both images
4.3 Using Multiple Images
Using multiple background images with different sizes.
Usage Example:
.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">Multi-Level Background with Sizes</div>
</body>
Code Explanation:
background-size: 50% 50%, 30% 30%;: scales the first image to 50% of the element's width and height, and the second image to 30% of the element's width and height
4.4 Transparent Images
Overlaying images with transparency.
Usage Example:
.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">Multi-Level Background with Transparency</div>
</body>
Code Explanation:
background-size: cover, 50%;: scales the first image to cover the entire element, and the second image to 50% of the element's size::before: the pseudo-element adds a semi-transparent black layer over the background images
4.5 Clipping Backgrounds
Using other properties with multiple background images.
background-origin and background-clip
These properties control the area where the background image is displayed and the clipping area.
Usage Example:
.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">Multi-Level Background with background-origin and background-clip</div>
</body>
Code Explanation:
background-origin: padding-box, content-box;: the first image starts from the inner edge of the padding, the second image from the content of the elementbackground-clip: border-box, padding-box;: the first image is clipped to the outer border edge, the second image to the inner padding edge
GO TO FULL VERSION