<div class="scroll-bg"></div>
@keyframes scrollBg {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-330px);
  }
}

.scroll-bg {
  height: 100%;
  width: 100%;
  position: fixed;
  padding-bottom: 330px;
  background-color: #E8BA9B;
  background-image: url('https://andreivictor.ro/codepen/scroll-bg-animation-pinterest/bg_pasta_grid-3f880df3.jpg');
  background-size: cover;
  animation: scrollBg 35s linear forwards;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.