無限のスクロールバックグラウンド

Question

バックグラウンドポジションプロパティを使用して無限のスクロールバックグラウンドを幾分達成しました。しかし、問題はバックグラウンドイメージの値を与えたことです：200px キーフレームで、200px私はそれが起こることを望んでいません、それは何の問題もなく無限にスクロールする必要があります。どうやってするの？

ここにコードがあります。

HTML：

<div id="cloud-scroll"></div> 

CSS：

 #cloud-scroll { 
     width: 275px; 
     height: 183px; 
     background: url(http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png); 
     background-size:cover; 
     -webkit-animation: backgroundScroll 20s linear infinite; 
     animation: backgroundScroll 20s linear infinite; 
     } 

     @-webkit-keyframes backgroundScroll { 
      from {background-position:0;} 
      to {background-position:0 200px;} 
     } 

     @keyframes backgroundScroll { 
     from {background-position:0;} 
     to {background-position:0 200px;} 
     } 

Answer 1

あなたは、バックグラウンド・リピートを使用する必要があり、そのようなあなたの背景画像を設定することが垂直方向に繰り返されていますとき（または水平に、それはあなたが何をしているかの場合）シームレスです。

Answer 2

divは183pxですので、アニメーションで183pxを使用する必要があります。

@keyframes backgroundScroll { 
    from {background-position:0;} 
    to {background-position:0 183px;} 
}