Бесконечный фон с автопрокруткой

Вариант 1 – с помощью JS меняем позицию фонового рисунка

<div id=&quot;bg&quot;></div>

var y = 0;
var body = document.getElementById("bg");

requestAnimationFrame(move);

function move() {
  y++;
  body.style.backgroundPosition = "0px " + y + "px";
  requestAnimationFrame(move);
}

#bg {
  background-image: url('https://denis-creative.com/wp-content/uploads/2019/03/bg-scroll.jpg');
  background-size: 250px 250px; /*только для этого примера*/
  width: 100vw;
  height: 100vh;
}

See the Pen gEVNKy by Denis (@deniscreative) on CodePen.0

Вариант 2 – без JS с помощью CSS-анимации меняем позицию фоновой картинки

<div id=&quot;bg&quot;></div>

#bg {
  background-image: url('https://denis-creative.com/wp-content/uploads/2019/03/bg-scroll.jpg');
  background-size: 250px 250px; /*только для этого примера*/
  width: 100vw;
  height: 100vh;
  animation: moveSlideshow 5s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    background-position: 250px 250px;
  }
}

See the Pen Infinite scrolling background by CSS by Denis (@deniscreative) on CodePen.0

Вариант 3 – Более универсальный и быстрый для производительности способ, с помощью CSS-анимации двигается весь блок внутри родительского контейнера

<div class=&quot;container&quot;>
  <div id=&quot;bg&quot;></div>
</div>

.container {
  position: relative;
  width: 60vw;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}
#bg {
  background-image: url('https://denis-creative.com/wp-content/uploads/2019/03/bg-scroll.jpg');
  background-size: 250px 250px; /*только для этого примера*/
  width: 3000px;
  height: 100vh;
  animation: moveSlideshow 10s linear infinite;
}

@keyframes moveSlideshow {
  0 { 
    transform: translate3d(0, 0, 0);
  }
  100% { 
    transform: translate3d(-1000px, 0, 0);
  }
}

See the Pen Infinite scrolling background by CSS 2 by Denis (@deniscreative) on CodePen.0