CSSで背景画像を上下左右にスクロースする

CSSで背景画像を上下や左右にスクロール表示するサンプルを掲載しています。
当ページでは、背景画像の動き（上下/左右）や大きさ・透過度（透明度）、移動速度などを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="box">
  <div class="boxString">背景がスクロール</div>
</div>

<style type="text/css">
/* --- 背景が上下左右に動くのBOX定義 ------------------------ */
.box {
  position   : relative;
  max-width  : 500px;                   /* 背景の大きさに変更 */
  height     : 200px;
  margin     : auto;
  background : #ffffff;
}
/* --- 背景が上下左右に動くの背景定義 ----------------------- */
.box::before {
  display    : block;
  content    : "";
  position   : absolute;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  background-image : url(./image.jpg);  /* 使用する画像を指定 */
  animation  : bgAnime 15s linear infinite;
}
@keyframes bgAnime {
   0% { background-position: 0 0 }
                /* 使用する画像幅と画像高さのpxに変更ください */
 100% { background-position: 500px -332px }
}
/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.boxString{
  position   : absolute;
  display    : inline-block;
  background : rgba(0, 127, 255, 0.7);
  top        : 50%;
  left       : 50%;
  padding    : 20px;
  color      : #fff;
  transform  : translate(-50%,-50%);
}
</style>