We all welcomed CSS3 when it was officially launched, and use the new options today. But one nice feature that CSS3 has and has not been explored to it’s full potential is the multiple backgrounds. This allows you to build up an image using smaller parts to create a more complex image. This feature allows you to have one single element instead of one for each image, it also means you don’t have to worry about z-indexing as it is automatic.

The logic is really simple to use, and it does not require anything very special. You simply need to add multiple background proprieties separated by commas. A good example would be:

div#main {
    background-image: url('bg1.png'), url('bg2.png'), url('bg3.png'), url('bg4.png'), url('bg5.png'), url('bg6.png'), url('bg7.png');
}

As you can see from the example above, we added 7 different background proprieties to the same div. But what if you want to position them differently? An example of how you can do that is shown below:

header#main {
    background-image: url('bg1.png'), url('bg2.png'), url('bg3.png'), url('bg4.png'), url('bg5.png'), url('bg6.png'), url('bg7.png');
    background-position: 50% 50%, 20% 10%, 60% 90%, 20% top, 85% 10%, left bottom, left top;
}

As you can see, the other background options are also added, but separated by commas. It could get a bit ugly if you want to use more backgrounds but if you keep your code clean and well written, you should be able to use them.

How about animate multiple background images

Well, that is quite easy as well. This can be done through CSS animation, and the proprieties you will be using there are the same as shown above. Let’s say for example that we want to animate each background image differently. A simple example for this would look like below so let’s start with the actual animation CSS keyframes:

@-webkit-keyframes move {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, left bottom, left top;
    }        
    100% { 
        background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    }
}

@-moz-keyframes move {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, left bottom, left top;
    }        
    100% { 
        background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    }
}

@keyframes move {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, left bottom, left top;
    }        
    100% { 
        background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    }
}

As you can see from above, we will be animating the background positions of those background images. The move CSS animation will then be used on our main div that has all these backgrounds:

div#main {
    width: 100%;
    height: 300px;        
    overflow: hidden;
    position: relative;
    background-image: url('bg1.png'), url('bg2.png'), url('bg3.png'), url('bg4.png'), url('bg5.png'), url('bg6.png'), url('bg7.png');
    background-position: 80% 50%, 90% 10%, 10% 90%, 40% top, 45% 10%, left bottom, left top;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x;            
            
    -webkit-animation: move 3s ease 1;
    -moz-animation: move 3s ease 1;
    animation: move 3s ease 1;
}

In conclusion

It’s quite easy now to create beautiful animations for your website and using CSS is always recommended. If you have any cool examples or want to share your example with us, just write us in the comments below.