CSS

CSS Multiple Background Images Example

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:

Basic Application of Multiple Backgorund Images
Basic Application of Multiple Backgorund Images

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:

Combining Image Formats for Multiple Backgrounds
Combining Image Formats for Multiple Backgrounds

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:

A complete example on a real-world scenario!
A complete example on a real-world scenario!

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

Download
You can download the full source code of this example here: CSS Multiple Background Image

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button