保持动画背景居中答案

【问题标题】：Keeping an animated background centered保持动画背景居中
【发布时间】：2011-06-17 12:56:30
【问题描述】：

我的目标是让图像栏横跨整个浏览器窗口，并且无论用户如何调整窗口都保持居中。这很容易，但我还想要图像以恒定循环定期向右滚动，同时仍保持“居中”。

现在我正在尝试使用背景图像来完成此操作，因为我可以在不创建滚动条的情况下使图像尽可能宽。加上内置的横向重复css能力是实现“循环”效果的简单方法。

我正在使用以下 jquery 代码为背景图像设置动画：

    function scrollingIMG() {
       $('#my_div').delay(5000).animate(
           {backgroundPosition:'+=200px 0'},
           500,
           'linear', 
           function() { scrollingIMG(); 
       });
    };

不幸的是，该代码触发的第二个背景不再居中，并且在调整浏览器窗口时不再与网站的其余内容同步移动。我是否错过了一个简单的 css/jquery 命令，它可以使背景图像与其余内容保持同步，同时仍将其向右移动？

【问题讨论】：

标签： jquery html css jquery-animate background-position

【解决方案1】：

使用中心而不是 0：

BackgroundPosition:'+=200 center'

这应该可以解决问题

【讨论】：

【解决方案2】：

你也可以使用：

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

【讨论】：