Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create multiple background image parallax in CSS?
Parallax scrolling is a visual effect that creates depth by moving background elements at different speeds than foreground content. Using multiple background images with CSS animations, you can create engaging parallax effects that add movement and dimension to your web pages.
Syntax
.container {
background-image: url(image1.jpg), url(image2.jpg);
animation: parallax-move duration linear infinite;
}
@keyframes parallax-move {
0% { transform: translateX(0); }
100% { transform: translateX(-100px); }
}
Key Properties
background-image Property
The background-image property allows you to set one or more images as backgrounds for an element. You can position, repeat, and size these images using related background properties.
animation Property
The CSS animation property creates smooth transitions without JavaScript. It uses keyframes to define how an element changes over time.
| Property | Description |
|---|---|
animation-name |
References the @keyframes rule |
animation-duration |
Length of time for one animation cycle |
animation-timing-function |
Speed curve (linear, ease, etc.) |
animation-iteration-count |
Number of times to repeat (or infinite) |
Example: Multiple Background Image Parallax
The following example creates a parallax effect with three layers moving at different speeds
<!DOCTYPE html>
<html>
<head>
<style>
.parallax-container {
height: 300px;
width: 100%;
overflow: hidden;
position: relative;
border: 2px solid #333;
}
.layer {
position: absolute;
height: 100%;
width: 150%;
background-size: cover;
background-repeat: no-repeat;
}
.layer-1 {
background: linear-gradient(45deg, #ff6b6b, #feca57);
animation: move-slow 20s linear infinite;
z-index: 1;
}
.layer-2 {
background: linear-gradient(45deg, #48dbfb, #0abde3);
animation: move-medium 15s linear infinite;
z-index: 2;
opacity: 0.8;
}
.layer-3 {
background: linear-gradient(45deg, #1dd1a1, #55efc4);
animation: move-fast 10s linear infinite;
z-index: 3;
opacity: 0.6;
}
@keyframes move-slow {
0% { transform: translateX(0); }
100% { transform: translateX(-33%); }
}
@keyframes move-medium {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes move-fast {
0% { transform: translateX(0); }
100% { transform: translateX(-67%); }
}
</style>
</head>
<body>
<h3>Multiple Background Image Parallax Effect</h3>
<div class="parallax-container">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3"></div>
</div>
</body>
</html>
A container with three colored gradient layers moving horizontally at different speeds, creating a parallax effect. The bottom layer (red-orange) moves slowest, middle layer (blue) moves at medium speed, and top layer (green) moves fastest.
Key Implementation Steps
Container Setup Create a container with
overflow: hiddenandposition: relativeLayer Positioning Set each background layer to
position: absolutefor precise controlDifferent Speeds Use varying animation durations to create depth perception
Z-index Control Layer elements properly with z-index values
Opacity Effects Use transparency to blend layers naturally
Conclusion
Creating multiple background image parallax effects with CSS animations provides an engaging way to add depth and movement to web pages. By layering elements with different animation speeds and proper positioning, you can achieve professional-looking parallax effects that enhance user experience.
2K+ Views
