Parallax scrolling effect using CSS

Last Updated : 13 Mar, 2024

The parallax scrolling effect in CSS involves moving background images at a slower rate than foreground content, creating an illusion of depth and immersion as users scroll through a webpage. It enhances visual appeal and user experience.

Here we have an HTML setup for a parallax scrolling effect with a fixed background image and multiple sections using the “parallax” class for desired sections.

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 */
            .parallax {
                background-image: url("background-image.jpg");
                min-height: 500px;
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div class="parallax">
            <!-- Content for the first parallax section -->
        </div>
        <div>
            <!-- Content for the second section -->
        </div>
        <!-- Add more divs with parallax class for additional sections -->
    </body>
</html>

Explanation

Here the explanation of using above CSS properties

background-attachment : Controls if background image scrolls with page or remains fixed.

 background-attachment: scroll/fixed/local;

background-position: This property determines the starting position of the background image.

background-position: value;

background-repeat: Determines background image repetition: repeat, repeat-x, repeat-y, or no-repeat.

 background-repeat: repeat/repeat-x/repeat-y/no-repeat;

background-size: This property determines the size of the background image.

 background-size: auto/length/cover/contain/;

Example of Parallax scrolling effect using CSS

Example: In this example we demonstrates a basic parallax scrolling effect using CSS. Two sections with background images scroll at different speeds as the user scrolls down the page.

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>