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.

View demo

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.

@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.

View demo Download source

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.

Further References

• Using CSS Multiple Backgrounds – MDN
• CSS3 Backgrounds and Borders Module Level 3 – W3.org