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 on top of each other in the order they are listed: the first image appears above the others (i.e., closer to the user), and the last one is underneath all of them, closer to the "back" of the element.
4.2 Overlaying Images
Simple image overlaying.
Usage Example:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://cdn.codegym.cc/images/article/85d8e9a9-4c1d-40c3-8aed-aeaf252b5846/256.jpeg'), url('https://cdn.codegym.cc/images/article/9bf86e5d-f53c-4fcb-b34c-c4d4657e1034/256.jpeg');
background-size: 45% 45%, 45% 45%;
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
.multi-bg {
width: 300px;
height: 300px;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg"></div>
</body>
Code Explanation:
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');: 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://cdn.codegym.cc/images/article/85d8e9a9-4c1d-40c3-8aed-aeaf252b5846/256.jpeg'), url('https://cdn.codegym.cc/images/article/9bf86e5d-f53c-4fcb-b34c-c4d4657e1034/256.jpeg');
background-position: top left, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 60% 60%, 50% 50%;
border: 1px solid #000;
}
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: top left, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 60% 60%, 50% 50%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes"></div>
</body>
Code Explanation:
background-size: 60% 60%, 50% 50%;: scales the first image to 60% of the element's width and height, and the second image to 50% of the element's width and height
4.4 Transparent background
Sometimes you may need to make the background or background images of an element transparent. If we apply the opacity property to the element itself, we won’t get exactly what we expected: the entire element will become transparent, not just the background (which makes sense). We'll use a simple "hack" to achieve this with the help of ::before.
.multi-bg-opacity {
width: 600px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://cdn.codegym.cc/images/article/85d8e9a9-4c1d-40c3-8aed-aeaf252b5846/256.jpeg'), url('https://cdn.codegym.cc/images/article/9bf86e5d-f53c-4fcb-b34c-c4d4657e1034/256.jpeg');
background-position: top left, top right;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
opacity: 0.2;
}
.multi-bg-opacity {
width: 600px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: top left, top right;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
opacity: 0.2;
}
<body>
<div class="multi-bg-opacity">
There’s some veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long and interesting text here!
Note: its background doesn’t cover it 👽🐤
</div>
</body>
Code Explanation:
- The
::beforepseudo-element adds a nearly transparent background with images to our element background-size: contain, contain;: scales the background images so that they cover the element while preserving their proportions
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: 600px;
height: 300px;
background-image: url(https://cdn.codegym.cc/images/article/85d8e9a9-4c1d-40c3-8aed-aeaf252b5846/256.jpeg), url(https://cdn.codegym.cc/images/article/9bf86e5d-f53c-4fcb-b34c-c4d4657e1034/256.jpeg);
background-position: -85px 0, 430px bottom;
background-repeat: no-repeat, no-repeat;
background-size: 256px, 256px;
background-origin: border-box, content-box;
background-clip: padding-box, content-box;
border: 15px solid black;
padding: 30px;
margin: 20px;
}
.multi-bg-origin-clip {
width: 600px;
height: 300px;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: -85px 0, 430px bottom;
background-repeat: no-repeat, no-repeat;
background-size: 256px, 256px;
background-origin: border-box, content-box;
background-clip: padding-box, content-box;
border: 15px solid black;
padding: 30px;
margin: 20px;
}
<body>
<div class="multi-bg-origin-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