$('#content').css( {backgroundPosition: "0 0"} ) .animate( {backgroundPosition:"(0 -900px)"}, {duration:500} ); $.fn.moveBackgroundY = function( pixels, duration, easing ) { return this.animate( { pixels: pixels }, { step: function(now,fx) { console.log("Background Y position - " + now); $(this).css({ backgroundPosition: '0px ' + now + 'px', }); }, duration: duration, complete: function() { $(this).css({ backgroundPosition: '0px 0px', }); } }, easing); }; $('#content').moveBackgroundY(-900, 2100, 'easeInOutCubic'); $('#content').moveBackgroundY(300, 2100, 'easeInOutCubic'); return this.animate( { pixels: pixels }, { step: function(now,fx) { var calculatedPixels = this.pixels; console.log("Background Y position - " + now); $(this).css({ backgroundPosition: '0px ' + calculatedPixels + 'px', }); }, duration: duration, complete: function() { $(this).css({ backgroundPosition: '0px 0px', }); //not so sure about this but you have to do this somehow this.pixels = 0; } }, easing);