The aim of this example is to go through the application of multiple background images to a webpage or a specific elements within the page.
CSS3 allows you to add multiple background images for an element, through the background-image property built right into the core CSS.
The different background images are separated by commas, just like a comma separated list, and the images are stacked on top of each other.
Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.
1. Basic Setup & Application
Go ahead and create a new html document and add the basic sytnax in it like so:
<!DOCTYPE html> <html> <head> <title>CSS3 Multiple Background Images Example</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> </body> </html>
Before moving on, know the structure: background-image: url(image.jpg/png/gif), url (another_image.jpg/png/gif).
To see a basic application lets first add two text elements in html inside a wrapping div element.
<!-- HTML SECTION --> <div class="basic"> <h2>The basic application!</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>
Then apply the property in css following the guide/structure above. It would look like so:
<!-- STYLE SECTION -->
<style type="text/css">
.basic {
background-image: url(bg2.png), url(bg1.jpg); /* set two bg images */
background-position: center, center; /* centered both images */
width: 600px; /* restricted images into a specified width */
height: 300px; /* restricted images into a specified height */
}
</style>
We just applied it and positioned both images in the center. In the browser, you would have something like this:
2. Cases and Examples
Below, we’ll have a look at some interesting and popular usage of multiple backgrounds. We will leave the html for now.
2.1 Combining a JPG with a PNG as backgrounds
If you want a clear background, and see any text in it, you’ll probably love png images that support transparency.
Look at the code below:
.basic {
background-image: url(bg3.png), url(bg4.png), url(bg1.jpg); /* set three bg images */
background-position: right bottom, center bottom, center; /* positioned images */
background-repeat: no-repeat; /* no bg images should repeat */
width: 600px; /* restricted images into a specified width */
height: 300px; /* restricted images into a specified height */
}
We added one jpg background and two png’s. But you can add as many as you want. The example above would this way:
2.2 Full Page Backgrounds and Opacity
Just like we applied a bg image to a div element, we can have a full page bg image alongside with nested bg images inside div elements,and add opacity to specific backgrounds to achieve the design/view you need and make it more attractive. For example, look at this:
body {
font-family: "Montserrat";
background-image: url(bg1.jpg); /* set the full page backgrounf */
background-position: center;
}
.basic {
background-image: url(bg5.png), url(bg6.png); /* set two bg images */
opacity: 0.5; /* reduced opacity */
background-position: center, left center; /* centered both images */
background-repeat: no-repeat;
width: 60em; /* restricted images into a specified width */
height: 60em; /* restricted images into a specified height */
}
This case represents a complete exmaple of a nice usage of bg images. Look at this view:
3. Conclusion
To conclude, the multiple backgrounds in CSS3 are a great way to create visually stunning webpages and add relevant content in it, and are pretty easy to apply, just by using commas after each image. Keep in mind that the arrangement of the front or back positioning of the image depends on the way you write them.
The image you add first in the url() syntax will be the most front one, and other images coming back one after the other.
4. Download
You can download the full source code of this example here: CSS Multiple Background Image
