CSS allows you to create really cool stuff, like infinite background image scroll animation. And it will require a relatively simple solution.

In this example, we’ll create a section with a background image that will scroll horizontally from right to left.

To create a non-stop background image scroll animation (without cuts, breaks, or jumps) you’ll need to create a container for the animation itself and set a background image you’re willing to scroll.

HTML:

<div class="container"></div>

Since the container will be empty we’ll need to set its dimensions width and height properties. Additionally max-width property so it adapts for mobile screens and margin to center it.

.container {
  width: 500px;
  height: 300px;
  max-width: 80%;
  margin: 10px auto;
}

Next, let’s specify the background image via the background property and its size. We’ll need the fixed size, to later move it by the same amount via animation.

The background image should also have a repeat-x value set and the size to match the container dimensions.

background: url(https://images.unsplash.com/photo-1667937026547-1b7cce7525b7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njk3NTIzNzE&ixlib=rb-4.0.3&q=80) repeat-x;
background-size: 500px 300px;

We’ll be animating the background-position property with the @keyframe rule. Inside the @keyframe rule for animation, we’ll set the single step to (or 100%).

This means it will animate the background from the initial background-position value to -500px 0, hence moving the background 500px to the left.

@keyframes scroll {
  to {
    background-position: -500px 0;
  }
}

As for the container, we can specify the animation shorthand property. For smooth non-stop animation make sure to set the timing-function to linear and the iteration-count to infinite.

animation: scroll 4s linear infinite;

The final code looks as follows:

.container {
  width: 500px;
  height: 300px;
  margin: 50px auto;

  background: url(https://images.unsplash.com/photo-1667937026547-1b7cce7525b7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njk3NTIzNzE&ixlib=rb-4.0.3&q=80) repeat-x;
  background-size: 500px 300px;
  
  animation: scroll 4s linear infinite;
}


@keyframes scroll {
  to {
    background-position: -500px 0;
  }
}

Demo

Working demo with code can be found on CodePen:

See the Pen Background image scroll by Nikita Hlopov (@nikitahl) on CodePen.