背景がループして移動するCSSです。
backgroundLoopBoxクラスの中の背景がループします。

デモページはこちら

backgroundLoopBoxクラスの高さを設定しているプロパティ「padding-top」は、
使用する画像や背景の上に文字などを載せるかなど、用途に応じて変更する。

あくまで単なる背景として使用するなら（中に文字や画像を入れて高さが確保されるなら）、heightもpadding-topも不要です。
背景画像の縦横比を維持したい場合は、padding-topに「画像の高さ / 画像の幅」の%を設定する。

サンプルはページ全体の背景をループさせるコードです。
ページ全体にしない場合は、width; 100vw;　height: 100vh;は変更する。

<div class="backgroundLoopBox">
このクラスの中の背景はループして移動します。
</div>

.backgroundLoopBox {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
//padding-top: 17%;　//縦横比を保持する場合に記述
}

.backgroundLoopBox::before,
.backgroundLoopBox::after {
content: "";
background-image: url("img/background.jpg");//ループさせる画像のURL
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
}

.backgroundLoopBox::before {
animation: animeBackgroundLoopBefore 200s linear infinite;//速度は200sの数値を変更する
}

.backgroundLoopBox::after {
left: -1px;
right: 1px;
animation: animeBackgroundLoopAfter 200s linear infinite;//速度は200sの数値を変更する
}

@keyframes animeBackgroundLoopBefore {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}

@keyframes animeBackgroundLoopAfter {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}

デモページはこちら