jQuery Background Position

Basics

You can animate the position of a background image as either 'backgroundPosition' or 'background-position', providing both the horizontal and vertical offsets.

Simple animation: Go

$('#simpleButton').click(function() {
	$('#simpleBG').css({backgroundPosition: '0px 0px'}).
		animate({backgroundPosition: '-200px -150px'});
});

Positions

You have several options when specifying the new background position, besides supplying an absolute offset.

By named position: left topcenter top right topleft center centerright center left bottomcenter bottom right bottomleft righttop bottomcenter

$('#namedSelect').change(function() {
	$('#namedBG').animate({backgroundPosition: $(this).val()});
});

By relative position: +=100 +=50-=100 -=50 +=200px -=100px-=50% +=50% Go

$('#relativeButton').click(function() {
	$('#relativeBG').animate({backgroundPosition: $('#relativeSelect').val()});
});

Options

You can still use the standard options of all animations.

Speed: slownormal fast1000 2000 Go

$('#speedButton').click(function() {
	var speed = parseInt($('#speedSelect').val(), 10);
	speed = (isNaN(speed) ? $('#speedSelect').val() : speed);
	$('#speedBG').animate({backgroundPosition: '+=50% +=50%'}, speed);
});

Easing: swing in quadratic out quadratic in/out quadratic in cubic out cubic in/out cubic in quartic out quartic in/out quartic in quintic out quintic in/out quintic in sine out sine in/out sine in exponential out exponential in/out exponential in circular out circular in/out circular in back out back in/out back in bounce out bounce in/out bounce Go

$('#easingButton').click(function() {
	$('#easingBG').animate({backgroundPosition: '+=50% +=50%'},
		2000, $('#easingSelect').val());
});

Callback: Go

$('#callbackButton').click(function() {
	$('#callbackBG').animate({backgroundPosition: '+=50% +=50%'},
		1000, function() { alert('Completed animation'); });
});

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

Below are examples of how the plugin can be used. For more detail see the documentation reference page.

$(selector).animate({backgroundPosition: '-100px -50px'});
$(selector).animate({'background-position': '+=50% +=25%'});
$(selector).animate({backgroundPosition: 'left center'});