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
Selected Reading
How to Create a Parallax Scrolling Effect in CSS?
Parallax scrolling creates a visually appealing effect where background elements move at different speeds than foreground content during scrolling. This technique is commonly used on modern websites to add depth and visual interest.
Syntax
selector {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: value;
}
Key Properties for Parallax Effect
| Property | Value | Description |
|---|---|---|
background-attachment |
fixed |
Makes background image stay fixed while content scrolls |
background-position |
center |
Centers the background image |
background-size |
cover |
Scales image to cover entire container |
min-height |
px/%/vh |
Sets minimum height for the parallax section |
Example: Basic Parallax Scrolling Effect
The following example demonstrates a parallax scrolling effect with a fixed background image −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax-section {
background-image: url("/static/images/home/coding-groundhero.svg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.parallax-content {
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 20px;
text-align: center;
border-radius: 10px;
}
.scroll-content {
height: 800px;
background-color: #f4f4f4;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="scroll-content">
<h2>Scroll down to see the parallax effect</h2>
<p>This content scrolls normally while the background image below remains fixed.</p>
</div>
<div class="parallax-section">
<div class="parallax-content">
<h3>Parallax Background</h3>
<p>This background stays fixed while you scroll</p>
</div>
</div>
<div class="scroll-content">
<h2>Continue Scrolling</h2>
<p>Notice how the background image above appears to move at a different speed as you scroll past it.</p>
</div>
</body>
</html>
A webpage with sections that scroll normally and a parallax background section in between. The background image remains fixed while the content scrolls over it, creating a depth effect.
Conclusion
CSS parallax scrolling uses background-attachment: fixed to create an engaging visual effect where background images remain stationary while content scrolls. This technique adds depth and visual appeal to modern websites.
Updated on: 2026-03-15T15:33:23+05:30
338 Views
Advertisements