CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる 背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。 ー CODE ー HTML <section> <h1>BACK GROUND SCROLL</h1> </section> CSS body { margin: 0; padding: 0; } section { height: 300px; margin: 100px 10px; background-image: url(bg.png); -webkit-background-size: 500px; background
![CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション | 9ineBB](https://cdn-ak-scissors.b.st-hatena.com/image/square/0733f7107d537a3a59bf5dedc30f55ebe56ab03a/height=288;version=1;width=512/https%3A%2F%2F9-bb.com%2Fwp-content%2Fuploads%2F2015%2F03%2Fc.jpg)