Multiple Background Images with CSS3
Like CSS3 animations or transitions, there is something special for background property in CSS3. These new properties will allow greater control of the background when we use background images for elements.
The specialty of the new CSS3 properties 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 as a background. Multiple background images css tricks, helps to achieve very interesting effects. We can stack different images as backgrounds of the same element. We can add animation effects to each background images separately.
Before we go to the use of multiple images as backgrounds, we will have a look at the background related properties.
Background CSS Properties
* Background-clip: Background-clip specifies the painting are of the background. Different values for background-clip: “background-clip: border-box|padding-box|content-box|initial|inherit;”
* Background-origin: Background-origin specifies the positioning area of the background, relative to the content box. Values of this property are “background-origin: padding-box|border-box|content-box|initial|inherit;”
* Background-size: It specifies the size of the background image. Values are “background-size: auto|length|cover|contain|initial|inherit;”
How Multiple Background Images work?
Have you ever thought 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 separating two images properties.
background: url(image1.png) center center no-repeat, url(image2.png) left top no-repeat;
Multiple Background Images CSS3 example
The following example will show how to add multiple background for a div.
HTML for Mutliple Background Images
<div class="mutliple-bg"> </div>
We will add ‘Div’ element for applying multiple background image styles.
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. Just we have added some animation, so that we can understand the two images used as backgrounds. Multiple background images css animation will show the two different images used. Also this will show that we can add animations to the background images. We, 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
Browser Support for Multiple Background Images
Multiple Background images CSS3 not working in ie8? chrome? safari? The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs.
