The use of background images is an essential aspect of web design, and it’s a powerful tool for adding visual interest and personality to a website. However, it’s not always necessary to use just one background image. By combining multiple background images, you can create unique and engaging designs that set your website apart from the rest.
In this article, we’ll be exploring the various techniques for combining multiple background images in CSS.
Syntax
To display a combination of multiple images inside a div, let’s start with adding in multiple image sources from the CSS background-image, then separating them by commas:
background-image: url(bg1.png), url(bg2.png),…;
The first (leftmost) image will have the highest stack order (highest z-index). In this example, bg1.png will display on top of bg2.png.
.banner{
background-image: url(bg1.png), url(bg2.png),...;
background-position: right bottom, left top, ...;
background-repeat: no-repeat, repeat, ...;
background-size: contain, 50px,...;
background-origin: padding-box, content-box,...;
background-clip: padding-box, content-box,...;
}
Example
The following example has 3 individual images: tree.png, sky.png, and background.png, let’s combine all of them into a single background:
+
+
HTML & CSS:
<style>
.banner{
width: 652px;
max-width: 100%;
height: 153px;
border: 5px solid black;
background-image: url(cloud.png), url(tree.png), url(bg.png);
background-position: right top, left top, center center;
background-repeat: no-repeat, repeat, no-repeat;
background-size: auto, contain, cover;
background-origin: content-box, padding-box, border-box;
}
</style>
<div class="banner">Hello!</div>
Result:
background shorthand
As per usual, you can combine the declaration for multiple background properties with a background shorthand, for example:
Note: The background-color can only be applied to the last background.
HTML & CSS:
<style>
.banner{
width: 652px;
max-width: 100%;
height: 153px;
border: 5px solid black;
background: url(cloud.png) right top/auto no-repeat padding-box,
url(tree.png) left top/contain repeat content-box,
linear-gradient(0deg, rgba(34,193,195,1) , rgba(253,187,45,1)) center/cover no-repeat border-box;
}
</style>
<div class="banner">Hello!</div>
Result:
ui pencil 
Leave a Reply