CSS Tutorial: Create an infinite-scrolling background
Tags: css, cssart, tutorial, csstutoral
Published: 2023-03-21 10:42:03

---
title: CSS Tutorial: Create an infinite-scrolling background
published: true
date: 2023-02-28 07:03:58 UTC
tags: css, cssart, tutorial, csstutoral
canonical_url: https://blog.eleftheriabatsou.com/css-tutorial-create-an-infinite-scrolling-background
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyis5m5oif5znnov1fzj.jpeg)

## **Introduction**

In this article, I'll show you how to create an infinite scrolling effect using an image as your background. We'll use 2 `classes` and the `keyframes` for animation purposes.

#### You'll need:

- A code editor, I'm using [`codepen`](https://codepen.io/EleftheriaBatsou)

- An image, I found one through [google](https://static.vecteezy.com/system/resources/previews/001/928/973/original/rural-nature-road-scene-free-vector.jpg)

#### This is the final result: [_Codepen_](https://codepen.io/EleftheriaBatsou/pen/qBMaxPN?editors=0100)

## HTML

Let's start with the `HTML`. I'll use 2 classes.

```
<div class="container">
  <div class="infinite-scrolling"></div>
</div>

```

The HTML code includes a `div` element with class `container`, which contains another `div` element with class `infinite-scrolling`. This is a common structure used in web development to create a container element that holds other elements.

## CSS

Now let's do some magic!

I'll define the `container` and then the `infinite-scrolling`.

```
.container {
  overflow: hidden;
}

```

The CSS code sets the `overflow` property of the container `div` to `hidden`, which means any content that extends beyond the container's dimensions will be hidden from view.

```
.infinite-scrolling {
  background: url("https://static.vecteezy.com/system/resources/previews/001/928/973/original/rural-nature-road-scene-free-vector.jpg") repeat-x;
  height: 645px;
  width: 5760px; /* The image width times 3 */
}

```

The `infinite-scrolling` class sets the background of the `div` element to an image located at the URL specified in the `background` property. In this case, the image repeats horizontally (`repeat-x`) to create the effect of an infinitely scrolling background!

The `height` property of the `infinite-scrolling` class is set to `645px`, which determines the height of the scrolling background. The `width` property is set to `5760px`, which is the width of the image multiplied by 3, so that the image repeats three times horizontally. (So, the size of the image I picked is 1920x645.)

**_If you're not sure you're understanding the above code block keep reading this section, else you may continue to ANIMATION._**

The `width` property of the `.infinite-scrolling` class is set to `5760px`, which is three times the width of the background image. This is done to create the effect of an infinitely scrolling background that seamlessly repeats itself.

When the background image is repeated using the `repeat-x` value of the `background-repeat` property, the image is repeated horizontally to fill the width of the container element. By setting the `width` of the `.infinite-scrolling` element to three times the width of the background image, it ensures that there are always three copies of the background image visible on the screen at any given time.

As the background image starts scrolling from right to left, the first copy of the image disappears off the left edge of the screen and the fourth copy of the image becomes visible on the right edge of the screen, creating the illusion of an infinitely scrolling background. Without setting the `width` to three times the width of the background image, the scrolling effect would not be seamless because there would be a gap between the end of the first image and the beginning of the second image.

## ANIMATION

And to the fun part! Let's add the animation. We'll need to add one more line to the previous CSS class. Here's how it's going to look.

```
.infinite-scrolling {
  background: url("https://static.vecteezy.com/system/resources/previews/001/928/973/original/rural-nature-road-scene-free-vector.jpg") repeat-x;
  height: 645px;
  width: 5760px; /* The image width times 3 */

  animation: slide 60s linear infinite;
}

```

The `animation` property of the `infinite-scrolling` class specifies an animation called `slide`, which lasts for 60 seconds (`60s`), plays in a linear manner, and repeats infinitely (`infinite`).

Next, we need to set the `infinite.`

```
@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1920px, 0, 0); /* The image width */
  }
}

```

The `@keyframes` rule defines the `slide` animation, which specifies how the background image should move across the screen.

- The `0%` keyframe sets the initial state of the animation, which is that the image is not translated (`translate3d(0, 0, 0)`).

- The `100%` keyframe sets the final state of the animation, which is that the image is translated by `-1920px` along the x-axis (`translate3d(-1920px, 0, 0)`), which is equivalent to the width of the image. This causes the background image to move across the screen from right to left, creating the effect of an infinitely scrolling background.

Are you still here? Congrats, you did it!

[https://codepen.io/EleftheriaBatsou/pen/qBMaxPN?editors=0100](https://codepen.io/EleftheriaBatsou/pen/qBMaxPN?editors=0100)

If you found this tutorial helpful or you do any similar projects feel free to tag me and I'll gladly have a look!

Do you still have any questions or feedback? Please comment below!

## **Sum up💫**

The article explains how to create an infinite scrolling effect using an image as the background on a webpage. It uses CSS to set the background and animation properties, and the `@keyframes`rule to define the slide animation. By setting the width of the scrolling element to three times the width of the image, the scrolling effect appears seamless.

* * *

Thank you for reading! <mark>Find the </mark> [**<mark>code</mark>**](https://codepen.io/EleftheriaBatsou/pen/qBMaxPN?editors=0100) on Codepen.

* * *

👋 Hello, I'm Eleftheria, developer & public speaker.

🥰 If you liked this article, consider sharing it.

🌈 [**All links**](https://limey.io/batsouelef) | [**Twitter**](https://twitter.com/BatsouElef) | [**LinkedIn**](https://www.linkedin.com/in/eleftheriabatsou/)