A Simple Guide to Using CSS3 Multiple Backgrounds
Adding a background image with CSS is nothing new; this feature has been available since the beginning. However, we were limited to adding only one image in a single declaration block. Now, CSS3 raises the stakes by providing the option of adding multiple backgrounds.
How to Use Multiple Backgrounds in CSS3
In the past, to add more than one background image, we had to modify the HTML structure and add more classes to achieve the desired result through CSS, something like this:
.overcast1 {
background-image: url("images/overcast.png");
background-position: 150px 25px;
}
.rainbow {
background-image: url("images/rainbow.png");
background-position: 200px 10px;
}
.overcast2 {
background-image: url("images/overcast.png");
background-position: 250px 25px;
}
.sunny {
background-image: url("images/sunny.png");
background-position: 100px 10px;
}
The code above is clearly redundant. In CSS3, this can be simplified into a single background-image property, as shown below:
.weather {
width: 500px;
height: 280px;
margin: 50px auto;
background-image: url("images/overcast.png"),
url("images/rainbow.png"),
url("images/overcast.png"),
url("images/sunny.png");
background-position: 150px 25px,
200px 10px,
250px 25px,
100px 10px;
background-repeat: no-repeat;
}
In this example, we added the same four images with different positions, resulting in a stunning effect.
Adding Animation Effects
We can make the result even more impressive by adding CSS3 Animations. To keep the coding simple, we will use only the standard syntax from W3C. However, keep in mind that browsers like IE9, Firefox, Opera, Chrome, and Safari still need their respective prefixes for this to work correctly.
How to Advanced Marquee Effect with CSS3 Animation
Today we are going to take a look at "marquee" once again. We actually have covered about it... Read more
@keyframes weather {
0% {
background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px;
}
100% {
background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px;
}
}
After specifying the @keyframes, we just need to add the animation with the keyframe name to the intended selector, in this case, .weather:
.weather {
animation: weather 5s;
}
That’s it! You can now see the animation effect in action from the links below and download the source code for further examination.
Browser Support
According to CanIUse.com, CSS3 Multiple Backgrounds is supported in the following browsers: IE9+, Firefox 3.6+, and others. Unfortunately, Internet Explorer 8 does not support this feature. If you are comfortable leaving IE8 behind, you can start using CSS3 Multiple Backgrounds right now.