Background animation using jQuery

· 1 Comment · in JavaScript, jQuery

You can actually animate a background image with jQuery – though it’s not as easy as it sounds.

There are cross-browser concerns.

I’ve tested many ways to achieve it and in this post there is code that should work cross-browser. Let’s dig in…

At first I thought this would be simple – just use jQuery .animate() to change the background position on an element, right?


Turns out that an element style with two values, like background-position, is not officially “supported” with .animate().

Also, IE handles the value differently, as do other browsers. It will work in some browsers which makes it even more confusing.

There’s plug-ins out there that will probably accomplish this nicely, but i have not looked into them. Wanted to achieve this myself as an exercise.

We will have an element with a field of stars as a background:

We are setting two attributes on our element, “data-speed” and “data-direction”. Starting with 1, you can increase the speed of the animation by increasing the number of the “data-speed” attribute. Setting to 0 will disable animation. The “data-direction” attribute will take a value of “up”, “down”, “left” or “right”.

<div class="space" data-speed="1" data-direction="left"></div>


.space {
	background:#000 url(bg_space.jpg);

The animation is processor intensive since it loops every 1/100 of a second to make sure the animation is smooth.

function animateBg(obj,s,d){
	if( typeof s === "undefined" ){
		var s = parseFloat( $(obj).attr("data-speed") );
		if( s === 0) {
			return false;
	if( typeof d === "undefined" ){
		var d = $(obj).attr("data-direction");
	//set background-position if not exist
	if( typeof $(obj).css("background-position") === "undefined" ){
		$(obj).css("background-position","0 0");
	var _bgPos = $(obj).css("background-position").split(" ");
	switch( d ){
			case "up":
				var _x = 0;
				var _y = parseFloat(_bgPos[1]) - s;
			case "down":
				var _x = 0;
				var _y = parseFloat(_bgPos[1]) + s;
			case "left":
				var _x = parseFloat(_bgPos[0]) - s;
				var _y = 0;
			case "right":
				var _x = parseFloat(_bgPos[0]) + s;
				var _y = 0;
	var _temp = $("<div></div>");
			$(obj).css("background-position", _x.toString()+" "+_y.toString() );

You initialize the function by passing it the element object:

animateBg( $(".space") );

Put it all together and you can see the example here.

Tested in:
jQuery version 1.7.2, 1.8
FF 3.6+, Safari, Chrome, IE8+

Great books are available on JavaScript and jQuery.

This entry was posted in JavaScript, jQuery and tagged , , , .
Bookmark the permalink.

One Response to Background animation using jQuery

  1. overthumbs says:

    Not the answer you re looking for? Browse other questions tagged jquery background jquery-animate or ask your own question .

Leave a Reply

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


To include code in your comment: Paste your code in the comment form, select it and then click the language link button below. This will wrap your code in a <pre> tag(or shortcode) and format it when submitted.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">