Design a Parallax Webpage using HTML & CSS

13 Apr, 2021
A parallax website includes fixed images in the background that is kept in place and 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 add a background image to the container. Then we have 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 target 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 have decorated our text and placed the head at a fixed position.
Example:
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:
CSS-Properties
CSS-Questions
CSS-Selectors
HTML-Questions
HTML-Tags
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.