Design a Parallax Webpage using HTML & CSS

Read

Discuss

A parallax website includes fixed images in the background that is kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to write our content and will use CSS to align and beautify our basic HTML design.

Approach:

We have used a container element and added a background image to the container. Then we used the background-attachment: fixed to create the actual parallax effect.
For each HTML section, we have given a class so that it can be targeted in the CSS.
In the HTML page, we have divisions and in each division, there is a header and a small paragraph. In the CSS file, we decorated our text and placed the head in a fixed position.

Example: In this example, we will use the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
 
        /* Styling the body */
        * {
            margin: 0px;
            padding: 0px;
        }
 
        /* Styling the first parallax's 
        height, width and background color */
        .parallax-1 {
            width: 100%;
            height: 600px;
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');
            background-size: 100% 100%;
            background-attachment: fixed;
        }
 
        /* Styling the title of first parallax */
        .parallax-1 h2 {
            margin: auto;
            position: relative;
            left: 500x;
            top: 300px;
            width: 250px;
            height: 32px;
            padding: 10px;
            background-color: black;
            color: white;
            text-align: center;
        }
 
        /* Styling the second parallax's 
        height, width and background color */
        .parallax-2 {
            width: 100%;
            height: 600px;
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');
            background-size: 100% 100%;
            background-attachment: fixed;
        }
 
        /* Styling the title of second parallax */
        .parallax-2 h2 {
            margin: auto;
            position: relative;
            left: 500x;
            top: 300px;
            width: 250px;
            height: 37px;
            padding: 10px;
            background-color: white;
            color: black;
            text-align: center;
            font-size: 30px;
            font-family: Verdana;
        }
 
        /* Styling the content or paragraph */
        .para-1 {
            padding: 50px;
            background-color: black;
            color: white;
            font-size: 17px;
        }
 
        /* Styling the content or paragraph */
        .para-2 {
            text-align: center;
            padding: 25px;
            font-size: 17px;
            font-family: Verdana;
            background-color: black;
            color: white;
        }
    </style>
</head>
 
<body>
 
    <!-- Giving title of the first parallax -->
    <div class="parallax-1">
        <h2>SUSHANT GAURAV</h2>
    </div>
 
    <!--Content of first parallax -->
    <div class="para-1">
        <p>
            Thankyou for showing interest, 
            here is a quick story of me and
            this website. My programming 
            journey started back in 2019, 
            few months before I started 
            studying CSE in LNCT Bhopal. 
            I am currently in my second 
            year and doing Technical 
            Content Writing Internship
            at GeeksForGeeks. I like 
            coding all kind of problems 
            from the very basic like adding 
            numbers to the complex ones like
            competitive programming problems.
            I love making projects and games.
            Infact this website is one of my 
            Web Development Projects which 
            is built using HTML and CSS.<br>
            <br>Languages known : C Language, 
            C++, JAVA, Python, JavaScript, 
            MySQL.<br> IT Constructs : Data 
            Structures and Algorithm, OOP, 
            HTML, CSS, LINUX, and Git & GitHub.
        </p>
    </div>
 
    <!-- Giving title of the first parallax -->
    <div class="parallax-2">
        <h2>PROJECTS</h2>
    </div>
 
    <!--Content of first parallax -->
    <div class="para-2">
        <p>
              Calendar ☀  
            Tic-Tac-Toe ☀  
            Quiz Game ☀  
            Survey Form ☀  
            Chat Bot in C ☀  
            Tribute Webpage ☀  
            Portfolio Website ☀  
            Guess the Number ☀  
            Rock Paper Scissor ☀ 
            To-Do List using JS ☀  
            Notes Taker using JS ☀  
            BMI Calculator using JS ☀ 
            Loan Calculator using JS ☀  
            Travel Management System ☀  
            Random Password Generator ☀  
            Different Management Systems
        </p>
    </div>
 
    <!--This will be same as first parallax-->
    <div class="parallax-1">
        <h2>ACHIEVEMENTS</h2>
    </div>
 
    <div class="para-2">
        <p>
              Technical Content Writer 
            Intern at GeeksForGeeks ☀
              Microsoft Learn Student 
            Ambassador - Beta ☀  
            Participant in GirlScript Summer 
            of Code 2021 ☀  
            Mentored HackTX Hackathon
        </p>
    </div>
</body>
</html>

Output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 15 May, 2023

How to hide text going beyond DIV element using CSS ?

How to specify the type of files that server accepts in HTML5 ?

Design a Parallax Webpage using HTML & CSS

HTML

Please Login to comment...