Keeping an animated background centered

My goal is to have an image bar that stretches across the entire browser window and remains centered regardless of how the user adjusts the window. That's easy, but what I also want is the image to periodically scroll to the right, in a constant loop, while still remaining 'centered'.

Right now I'm trying to accomplish this with a background image, since I can make the image as wide as I want without creating scrollbars. Plus the built-in css ability to repeat horizontally is a simple way to achieve the "looping" effect.

I'm using the following jquery code to animate the background image:

    function scrollingIMG() {
       $('#my_div').delay(5000).animate(
           {backgroundPosition:'+开发者_开发知识库=200px 0'},
           500,
           'linear', 
           function() { scrollingIMG(); 
       });
    };

Unfortunately the second this code fires the background is no longer centered and no longer moves in sync with the rest of the site content when the browser window is adjusted. Am I missing an easy css/jquery command that would keep the backgroundimage in sync with the rest of the content, while still shifting it to the right?

Use centre instead of 0:

BackgroundPosition:'+=200 center'

That should do the trick

You can also use:

'background-position-y': '50%'