Home » CSS 3 » Multiple Background Images

Multiple Background Images

Multiple Backgrounds

Like CSS3 animations or transitions, there something special for background property in CSS3. These new properties will allo greater control of the background.
The speciality of the new properties in CSS3 is that it allows multiple background images for an element. For example, to ‘Body’ element we can give two background images. In CSS2, only one image was possible for one element. With multiple backgrounds, we can achieve very interesting effects, we can stack different images as backgrounds of the same element. We can add animation to each background images seperately.

Before we go to the use of multiple images, we will have a look at the background related properties.

* Background-clip: Background-clip specifies the painting are of the background
* Background-origin: Background-origin specifies the positioning area of the background.
* Background-size: It specifies the size of the background image.

How Multiple Background Images work?

We can add Multiple background images using either the individual background properties or the background shorthand property. Here we will use the shorthand property for adding multiple backgrounds. We use a comma for seperating two images properties.

background: url(image1.png) center center no-repeat, url(image2.png) left top no-repeat;

The following example will show how to add multiple background for a div.

HTML for Mutliple Background Images

<div class="mutliple-bg"> </div>

CSS for Mutliple Background Images

.mutliple-bg {
	background: url(ladybug.png) no-repeat center 30px, url(background.png) no-repeat center center;
	width: 500px;
	height: 350px;
	margin: 0 auto;

//adding some styles to the multiple-bg div
	border: 2px solid #c5c5c5;
	border-radius: 8px;
	box-shadow: 0 3px 3px #d5d5d5;

//animating the background
	transition:background-position 1s;
}
.mutliple-bg:hover {
	background-position:center 110px, center center;
}

In the CSS, two images are added, separated by comma. Added transition for the background and on hover of the div changing the position of the background image (ladybug.png) from 30px to 110px.

Demo for Mutliple Background Images

For more css tricks and tips, visit CSS Stars

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*