css - CSS动画背景不适用于整个页面

Question

所以我最近发现了 CSS3 真正令人兴奋的动画特性，并在我的网站背景中应用了一个动画：

http://ryanhammond.us/

我的问题是动画仅适用于加载时在浏览器窗口中可见的页面部分。如果您转到上面的链接并向下滚动，您会明白我的意思，背景图像在网站的顶部是动画的，但当您向下滚动页面时不会...

有谁知道解决这个问题的方法，以便 bg 动画适用于整个页面？

以下是我的 CSS 代码的相关部分：

body
{
background-image:url('images/patterntest2.jpg');
background-repeat:repeat;
-webkit-animation:bgscroll 20s infinite linear;
   -moz-animation:bgscroll 20s infinite linear;
    -ms-animation:bgscroll 20s infinite linear;
     -o-animation:bgscroll 20s infinite linear;
        animation:bgscroll 20s infinite linear;
}

/*////////////////////////////////////////////////
--------------------------------------------------
*   Animations
-------------------------------------------------- 
////////////////////////////////////////////////*/

@-webkit-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-moz-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-ms-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-o-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

Answer 1

使用 Chrome，它对我来说也很好用。但如果你有问题，我想你可以尝试设置

background-size: cover;

也许这会解决你的问题。