以下、キーフレームの指定も含めたスタイルシートの記述になります。等を効かせてウィンドウ全体を覆います。このとき、高さは最低でも200%以上に指定します。重要な@keyframesですが、「translate3d」で指定する第2引数には背景で使用する画像の高さを記入します。https://on-ze.com/demo/css3-infinite-scrolling-background/同じ方法で「translate3d」ではなく「background-position」を使う方法もあります。「background-position」を使いたい場合はキーフレームの箇所を次のように書き換えましょう。-320px;}}先ほどと同じようにスクロールさせる距離は背景画像の高さに合わせます。「translate3d」と「background-position」を比較すると、描画は「translate3d」のほうがスムーズです。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【CSS】重なり順(z-index)の値が下の要素をクリックする方法モバイルデバイス(iPad、iPhone等)でサイトを観覧時に、右側に空白ができてしまう時の解決策。[CSS]だけでオンズのロゴを作ってみた。【CSS】スタイルシートだけで「border:dashed;」をグラデーションさせてみた。