CSS Infinite Scrolling Background Animation | infinite scrolling img

Create an infinite scrolling animations using CSS. A horizontal infinite scrolling background image using a single background image with CSS animations to move it horizontal or vertical across the screen and repeat when it’s done. The trick is that we are using a parallax image scrolling effect that gives the infinite loop an image.

HTML

<div class="sky">
<div class="background-animated"></div>
<div class="aircraft"><img src="../img/aircraft.png"></div>       
</div>

CSS

.sky{
    position: relative;
    height: 325px;
    background: url(../img/sky.jpg) no-repeat center center;
}
.aircraft{
    position: absolute;
    left:0;
    right:0;
    top: 70px;
    width:280px;
    margin:0 auto;
}
.background-animated {
  width: 100%;
  height: 300px;
  position: absolute;
  background-image: url(../img/cloud.png);
  animation: infiniteScrollBg 40s linear infinite;
}

@keyframes infiniteScrollBg {
  0% {
    background-position: 50% 0;
  }
  100%{
    background-position: 50% (-300 * 2);
  }
}

Example

<div class="background-animated"></div>

.background-animated {
  width: 100%;
  height: 404px;
  position: absolute;
  background-color: #000;
  background-image: url('css-infinite-scrolling-background-animation.jpg');
  animation: infiniteScrollBg 35s linear infinite;
}

@keyframes infiniteScrollBg {
  0% {
    background-position: 50% 0;
  }
  100%{
    background-position: 50% (-404 * 2);
  }
}

Infinite scrolling background image CSS

CSS Infinite Scrolling Background Animation | infinite scrolling images will keep playing in an infinite loop of animation on your project.

The background image must be 3 times the width or height of the element it will be the background.