Design a Parallax Webpage using HTML and CSS
Last Updated :
30 Jul, 2024
Improve
A parallax website includes fixed images in the background that are 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.
Basically, the Scrolling effect is where background images move at a different speed than the foreground images.
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:
<!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>
166
1
2
<html lang="en">3
4
<head>5
<style>6
7
/* Styling the body */8
* {9
margin: 0px;10
padding: 0px;11
}12
13
/* Styling the first parallax's 14
height, width and background color */15
.parallax-1 {16
width: 100%;17
height: 600px;18
background: url(19
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');20
background-size: 100% 100%;21
background-attachment: fixed;22
}23
24
/* Styling the title of first parallax */25
.parallax-1 h2 {26
margin: auto;27
position: relative;28
left: 500x;29
top: 300px;30
width: 250px;31
height: 32px;32
padding: 10px;33
background-color: black;34
color: white;35
text-align: center;36
}37
38
/* Styling the second parallax's 39
height, width and background color */40
.parallax-2 {41
width: 100%;42
height: 600px;43
background: url(44
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');45
background-size: 100% 100%;46
background-attachment: fixed;47
}48
49
/* Styling the title of second parallax */50
.parallax-2 h2 {51
margin: auto;52
position: relative;53
left: 500x;54
top: 300px;55
width: 250px;56
height: 37px;57
padding: 10px;58
background-color: white;59
color: black;60
text-align: center;61
font-size: 30px;62
font-family: Verdana;63
}64
65
/* Styling the content or paragraph */66
.para-1 {67
padding: 50px;68
background-color: black;69
color: white;70
font-size: 17px;71
}72
73
/* Styling the content or paragraph */74
.para-2 {75
text-align: center;76
padding: 25px;77
font-size: 17px;78
font-family: Verdana;79
background-color: black;80
color: white;81
}82
</style>83
</head>84
85
<body>86
87
<!-- Giving title of the first parallax -->88
<div class="parallax-1">89
<h2>SUSHANT GAURAV</h2>90
</div>91
92
<!--Content of first parallax -->93
<div class="para-1">94
<p>95
Thankyou for showing interest, 96
here is a quick story of me and97
this website. My programming 98
journey started back in 2019, 99
few months before I started 100
studying CSE in LNCT Bhopal. 101
I am currently in my second 102
year and doing Technical 103
Content Writing Internship104
at GeeksForGeeks. I like 105
coding all kind of problems 106
from the very basic like adding 107
numbers to the complex ones like108
competitive programming problems.109
I love making projects and games.110
Infact this website is one of my 111
Web Development Projects which 112
is built using HTML and CSS.<br>113
<br>Languages known : C Language, 114
C++, JAVA, Python, JavaScript, 115
MySQL.<br> IT Constructs : Data 116
Structures and Algorithm, OOP, 117
HTML, CSS, LINUX, and Git & GitHub.118
</p>119
</div>120
121
<!-- Giving title of the first parallax -->122
<div class="parallax-2">123
<h2>PROJECTS</h2>124
</div>125
126
<!--Content of first parallax -->127
<div class="para-2">128
<p>129
Calendar 130
Tic-Tac-Toe 131
Quiz Game 132
Survey Form 133
Chat Bot in C 134
Tribute Webpage 135
Portfolio Website 136
Guess the Number 137
Rock Paper Scissor 138
To-Do List using JS 139
Notes Taker using JS 140
BMI Calculator using JS 141
Loan Calculator using JS 142
Travel Management System 143
Random Password Generator 144
Different Management Systems145
</p>146
</div>147
148
<!--This will be same as first parallax-->149
<div class="parallax-1">150
<h2>ACHIEVEMENTS</h2>151
</div>152
153
<div class="para-2">154
<p>155
Technical Content Writer 156
Intern at GeeksForGeeks 157
Microsoft Learn Student 158
Ambassador - Beta 159
Participant in GirlScript Summer 160
of Code 2021 161
Mentored HackTX Hackathon162
</p>163
</div>164
</body>165
166
</html>Output:
Video Player
00:00
00:00
