How to use Multiple backgrounds and Animation with CSS3

How to use Multiple backgrounds and Animation with CSS3

2 58575
Multiple backgrounds with CSS3 with animation

Multiple backgrounds with CSS3 and a little of animation. In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going to add a bit of JS code for simple animation (to make it not so boring). Commonly, it is very easy to apply multiple backgrounds – we just need to list them (separated by commas) in the object properties.

Here are samples and downloadable package:

Live Demo


download in package


Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:


    <title>Multiple backgrounds with CSS3 and a little of animation</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/main.js"></script>
    <div class="example">
        <div id="main_object"></div>

Nothing special, just <div id="main_object"></div> inside

Step 2. CSS

Here are single CSS file with all necessary styles:


.example{background:#FFF;width:950px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
    background-image: url(../images/layer1.png), url(../images/layer2.png), url(../images/layer3.png), url(../images/bg.jpg);
    background-position: center bottom, right top, right bottom, left top;
    background-repeat: no-repeat;

Here, you can see way how I pointing these several backgrounds to our main element – all comma separated. Same and for ‘background-position’ too. Of course, if you want – you always can use use ‘background’ property to set all necessary styles, in this case – you can enum your properties in same way, separating values with commas, example:

background: url(../images/layer1.png) no-repeat center bottom, url(../images/layer2.png) no-repeat right top, url(../images/layer3.png) no-repeat right bottom, url(../images/bg.jpg) no-repeat left top;

Step 3. JS

Here are a little of JS for our animation:


var ex76 = {
    // variables
    l1w  : 358, // layer 1 width
    l1h  : 235, // layer 1 height
    l2w  : 441, // layer 2 width
    l3w  : 307, // layer 3 width
    // inner variables
    obj  : 0,
    xm   : 0,
    ym   : 0,
    x1 : 0,
    y1 : 0,
    x2 : 0,
    x3 : 0,
    // initialization
    init : function() {
        this.obj = document.getElementById('main_object');
        this.x2 = this.obj.clientWidth;
        this.x3 = -this.l3w;;
    // refreshing mouse positions
    mousemove : function(e) {
        this.xm = e.clientX;
        this.ym = e.clientY;
        // recalculation new positions
        this.x1 = this.xm - this.obj.offsetLeft - ex76.l1w/2;
        this.y1 = this.ym - this.obj.offsetTop - ex76.l1h/2;
    // loop function
    run : function() {
        // shifting second layer object to left
        if (ex76.x2 < -ex76.l2w) ex76.x2 = ex76.obj.clientWidth;
        // shifting second layer object to right
        if (ex76.x3 > ex76.obj.clientWidth) ex76.x3 = -ex76.l3w;
        // updating background-position value with new positions = ex76.x1 + 'px ' + ex76.y1 + ', ' + ex76.x2 + 'px top, ' + ex76.x3 + 'px bottom, left top';
        // loop
        setTimeout(, 20);
window.onload = function() {
    ex76.init(); // initialization
    // binding mouse move event
    document.onmousemove = function(e) {
        if (window.event)
            e = window.event;

This is pretty easy – for second and third layer – I changing its X positions (by cycle), for first layer – I changing its position in place where located our mouse.

Step 4. Images

Also we need several images for our demo (for different layers):


Live Demo


Today I told you how you can assign several images as background for single element. Hope that our demo gave you some ideas. Here are another application of this, you can create custom controls (buttons as example) with custom background, as example rounded buttons. You will need just set 2-3 layers (for beginning, center and end of button). Good luck!


Understanding Closures

0 21885


  1. You tutorial is excellent and quite in derived oriented for everybody who are in the field of designing especially. You have defined very easy steps to apply multiple backgrounds. cheers mate.

Leave a Reply