How to Use CSS3 Multiple Backgrounds

Adding background image with CSS is nothing new, this feature has been there since its inception. But we were limited to only add one image in one declaration block. Now, CSS3 is raising the stakes by providing you the option of adding multiple backgrounds.

How to use it?

In the old days, when we need to add more than one background image, we most likely will interrupt the HTML structure as well as add more classes to achieve the desired result through CSS, something like this.

The code above is clearly superfluous. In CSS3, this code can be concatenated in single background-image property, as follows;

In this code, we have added the same four images with different positions in accordance, producing this stunning results.

Adding Animation Effect

Furthermore, we can make the result even more stunning by adding CSS3 Animations. To make the coding simpler, we are going to use only the standard syntax from W3C, but remember that the browsers – IE9, Firefox, Opera, Chrome, and Safari – still need their respective prefixes for this to work.

Once we have specified the @keyframes, then we only need to add the animation with the keyframe name to the intended selector, in this case .weather;

That’s it, we can now see the animation effect in action from the links below as well as download the source for further examinations.

According to CanIUse.com, CSS3 Multiple Backgrounds is already supported in the following browsers; IE9+, Firefox 3.6+. No luck with Internet Explorer 8. But if you can assure yourself that you can leave IE8 behind, you can use CSS3 Multiple Backgrounds right now.

Leave a Comment

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