How to create multiple background image parallax in CSS ?
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 > |
Output: