Parallax scrolling effect using CSS

Last Updated : 11 Oct, 2024

Parallax scrolling effect using CSS creates an illusion of depth by making background elements move slower than foreground elements as the user scrolls. This effect adds a sense of three-dimensionality, enhancing visual appeal and interactivity on web pages for a more dynamic experience.

Approach: Creating Parallax Scrolling Effect

Set Background Images: Assign background images to .parallax1 and .parallax2 classes using background-image property for visual content.
Parallax Effect Properties: Use background-attachment: fixed to make the background stay static while scrolling.
Background Positioning: Utilize background-position: center, background-repeat: no-repeat, and background-size: cover for proper image display.
Define Height: Set min-height: 500px for the parallax sections to ensure enough scrolling space.

Syntax

background-attachment: scroll/fixed/local;
background-position: value;
background-repeat: repeat/repeat-x/repeat-y/no-repeat;
background-size: auto/length/cover/contain/;

Example of Parallax scrolling effect using CSS

Example: In this example we creates a parallax scrolling effect by setting background images with background-attachment: fixed for .parallax1 and .parallax2, making the background stay static while the content scrolls.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Parallax Scrolling Effect</title>

    <style>
        /* CSS for parallax effect */
        .parallax1 {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240313115219/HTML-tutorial.jpg");
            min-height: 500px;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .parallax2 {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240313115240/CSS-Tutorial-(1).webp");
            min-height: 500px;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="parallax1"></div>
    <div style="height: 300px">
        <h4>
            HTML stands for HyperText Markup Language. 
            It is the standard language used to create 
            and design web pages on the internet. It was
            introduced by Tim Berners-Lee in 1991 at 
            CERN as a simple markup language. Since then,
            it has evolved through versions from HTML 2.0 
            to HTML5 (the latest 2024 version)
        </h4>
    </div>
    <div class="parallax2"></div>
</body>

</html>