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:
index.html
<html>
<head>
<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>
</head>
<body>
<div class="example">
<div id="main_object"></div>
</div>
</body>
</html>
Nothing special, just <div id="main_object"></div> inside
Step 2. CSS
Here are single CSS file with all necessary styles:
css/main.css
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:950px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#main_object{
position:relative;width:950px;height:700px;overflow:hidden;cursor:pointer;
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:
js/main.js
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;
this.run();
},
// 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
ex76.x2--;
if (ex76.x2 < -ex76.l2w) ex76.x2 = ex76.obj.clientWidth;
// shifting second layer object to right
ex76.x3++;
if (ex76.x3 > ex76.obj.clientWidth) ex76.x3 = -ex76.l3w;
// updating background-position value with new positions
ex76.obj.style.backgroundPosition = ex76.x1 + 'px ' + ex76.y1 + ', ' + ex76.x2 + 'px top, ' + ex76.x3 + 'px bottom, left top';
// loop
setTimeout(ex76.run, 20);
}
};
window.onload = function() {
ex76.init(); // initialization
// binding mouse move event
document.onmousemove = function(e) {
if (window.event)
e = window.event;
ex76.mousemove(e);
}
}
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
download in package
Conclusion
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!
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.
Nice tutorial! I wish it worked without javascript though…