Simple Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.

Here is a very simple example of a DIV element with two background images. We have a red ball at the position 30/50 and a blue gradient that is repeated along the x axis. Both images are PNGs and are composited into the DIV background with smooth alpha channel transitions.

There are multiple ways of how to specify multiple images and Jonathan Snook covers the differences very well. During my experiments I've settled on the code style below in favor over defining everything in one line due to the better readability. With three or four images with positions and repeats it turns pretty ugly in one long line of CSS...

CSS:


width: 400px;
height: 180px;
padding: 10px 10px 10px 10px;
background-color: #a0e0ff;
background-image: url(../images/redball.png), url(../images/bluesky.png);
background-position: 30px 50px, 0 0;
background-repeat: no-repeat, repeat-x;
						

This example will work well in Firefox 3.6, Safari 4.0.4 and in the latest version of Chrome. The next version of Opera (10.5) will probably also support multiple background images, but I have not tested this in their latest betas. Internet Explorer will completely ignore background lines in the CSS with values for multiple images.

Animated Backgrounds

A warning for the kids: Now this is an example of what happens when you grow up with too many 8-Bit games hammering your poor brain.

What was the first thing - literally the very first thing - that I could think of as a possible use of multiple background images: Parallax Scrolling!

As it turns out, these new CSS features open a third avenue to rendering animations besides SVG and Canvas. And for certain animations, it is actually a very attractive way to code this, since all that has to be changed per animation cycle is only one line of CSS: the position of all the composited PNGs.

No Flash, no Canvas, no SVG - just a DIV:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.

Please note: Here is a version of the same background parallax scroller that uses CSS Transitions to minimize the role of JavaScript.

CSS:

The CSS is very similar to the first example, we've just extended the number of images from two to five. It is worth noting that images will be composited from right to left, with the right-most image being at the bottom of the image stack.

With the exception of the red ball, all images are the same width (1000 pixels) and are set to repeat along the x axis. If the starting point of these images slowly moves to the left, the ball appears to bounce along in the direction to the right.


width: 400px;
height: 180px;
padding: 10px 10px 10px 10px;
background-color: #a0e0ff;
background-image: url(../images/grass1.png), url(../images/redball.png), url(../images/tree1.png), url(../images/clouds1.png), url(../images/bluesky.png);
background-position: 0 0, 30px 50px, 0 0, 0 0, 0 0;
background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x;
						

JavaScript:

And here is a three-layer parallax scroller implemented in less than thirty lines of JavaScript, and most of it deals with the bouncing ball. The actual parallax effect took less than ten lines of code and only one style sheet change per cycle, which is really quite remarkable.

Four smoothly animated objects in one background seems to be at the edge of what is possible, however in this example three of the images are 1000x180 pixels each and all are PNGs with alpha channels. It's quite likely that this can be optimized in several different ways.

I see no reason why it shouldn't be possible to implement something like Space Invaders or a little Defender clone.
:-)


<script type="text/javascript">
	var ball_y = 30;
	var ball_dir = 1;
	var clouds_x = 0;
	var grass_x = 0;
	var tree_x = 0;
	function ani_loop() {
		clouds_x = clouds_x - .2;
		tree_x = tree_x - .7;
		grass_x = grass_x - 1;
		ball_y = ball_y + ball_dir;
		if (ball_dir > 0  &&  ball_y > 150) {
			ball_dir = -ball_dir;
			ball_y = 150;
		}
		if (ball_dir > 0) {
			ball_dir = ball_dir * 1.0312;
		}
		if (ball_dir < 0) {
			ball_dir = ball_dir * 0.97;
		}
		if (ball_dir < 0  &&  ball_dir > -0.15) {
			ball_dir = -ball_dir;
		}
		document.getElementById('animatedback').style.backgroundPosition = grass_x+'px 0, 30px '+ball_y+'px, '+tree_x+'px 0, '+clouds_x+'px 0, 0 0';
		t = setTimeout('ani_loop()',10);
	}
	ani_loop();
</script> 
						

Discussion

Name *:        Email *:       

Sorry, but we have to trick the spambots... How much is 2+1? *:

URL:
SUBMIT
no comments yet...