Skip to content
Related Articles

Related Articles

How to create a sliding background effect using CSS ?
  • Last Updated : 11 Jun, 2020

The sliding background effect is not the same as slideshow or carousel. The slideshow or the carousel consists of divided slides that can be stopped according to the user’s wish. The sliding background takes an image and slides it across the x-axis infinitely in a loop to create the effect of a never-ending and continuously moving background.

Approach: In a HTML layout, two elements are needed to implement for the sliding background. One that exactly fits the viewport and the other that runs through it and overflows it. In simple words one for the background and other to act as a containing wrapper for the background.

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="wrapper">
  <div class="sliding-background"></div>
</div>

chevron_right


In the next step, the two elements are given relevant positions. By default, the wrapper will be 100% of the browser’s width, and an overflow property is applied that will hide anything that is visually contained outside the wrapper. The wrapper will allow the user to see only the part contained in it. It is set to a width that would surely overflow almost every viewport which means it will overflow the wrapper.

filter_none

edit
close

play_arrow

link
brightness_4
code

.wrapper {
  overflow: hidden;
}
.sliding-background {
  height: 960px;
  width: 6000px;
}

chevron_right


In the next step, the background image needs to be created with arbitrary height and width. The width is taken as three times greater to fit into a minute longer loop. The canvas will be moving three times in a minute in an infinite loop. Mostly recommended software for creating image is Adobe Photoshop. After creating the image, add it to the sliding-background CSS as follows.

filter_none

edit
close

play_arrow

link
brightness_4
code

.sliding-background {
  background: url("path to the image") repeat-x;
  height: 500px;
  width: 5076px;
}

chevron_right


Next step includes adding the sliding effect. The background image is expected to move from left to right in a loop that repeats over and creates a seamless effect that the image moves in infinity. The transform is used to position the left image at the left side of the wrapper when the animation begins. By the time the animation is completed, it would have transformed the position negatively (from left to right) by an amount that matches the exact width of our image. This is the reason sliding-background is three times the width of the actual image, the image repeats three times between 0% and 100% before looping again.



filter_none

edit
close

play_arrow

link
brightness_4
code

@keyframes .slide {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}

chevron_right


The animation property will instruct the sliding-background class to use the slide animation to run for one minute at a time in a linear infinite loop.

filter_none

edit
close

play_arrow

link
brightness_4
code

.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 560px;
  width: 5076px;
  animation: slide 60s linear infinite;
}

chevron_right


Complete code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Sliding Background</title>
    <style>
        .wrapper {
            overflow: hidden;
        }
  
        .sliding-background {
            background: url(
            repeat-x;
            height: 961px;
            width: 6000px;
            animation: slide 60s linear infinite;
        }
  
        @keyframes slide {
            0% {
                transform: translate3d(0, 0, 0);
            }
  
            100% {
                transform: translate3d(-2000px, 0, 0);
            }
        }
    </style>
</head>
  
<body>
    <div class="wrapper">
        <div class="sliding-background"></div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :