How to create multiple background image parallax in CSS ?

Last Updated : 08 Sep, 2021

In this article, we will learn How to create multiple background image parallax in CSS.

Approach: First, we will add background images using the background-image property in CSS. We can add multiple images using background-image.

Syntax:

background-image: url(image_url1),url(image_url2),...;

Then we apply animation property in CSS that animate the images.

Syntax:

animation: duration timing-function iteration-count direction;

Below is the full implementation of the above approach:

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html {
        /* Add background image */
        background-image: url("gfg_stiker.png");
        /* Repeat image in x-axis  */
        background-repeat: repeat-x;
        /* Animate Using animation: duration 
           timing-function iteration-count direction; */
        animation: 30s parallel infinite linear;
      }
      /* timing-function */
      @keyframes parallel {
        100% {
          /* set background-position */
          background-position: -5000px 20%;
        }
      }
    </style>
  </head>
  <body>
    <div id="rocket">
    <img src="gfg_stiker.png" alt="rocket"
         style="margin: 200px 0px 50px 35%;">
  </div>
  </body>
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html {
        /* Add background image */
        background-image: url("gfg_complete_logo_2x-min.png");
        /* Repeat image in y-axis  */
        background-repeat: repeat-y;
        /* Animate Using animation: duration 
           timing-function iteration-count direction; */
        animation: 30s parallel infinite linear;
      }
      /* timing-function */
      @keyframes parallel {
        100% {
          /* set background-position */
          background-position: 5000px 20%;
        }
      }
    </style>
  </head>
  <body>
    <div id="rocket">
    <img src="gfg_complete_logo_2x-min.png"
         alt="rocket" style="margin: 200px 0px 50px 35%;">
  </div>
  </body>
</html>