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

Simple animation:

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

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

By named position:

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

By relative position:

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

You can still use the standard options of all animations.


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


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


Foreground text
$('#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} 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'});