How to Create a Parallax Website with HTML and CSS | Step-by-Step Guide

By Faraz - March 01, 2024

Learn to build a captivating parallax scrolling website from scratch using HTML and CSS with our comprehensive step-by-step guide.

Join us on Telegram

How to Create a Parallax Website with HTML and CSS.jpg

Read Also creating a tetris game with html css and javascript.jpg

Creating a Tetris Game with HTML, CSS and JavaScript

Parallax scrolling has become a hallmark of modern web design, captivating users with its dynamic and immersive experience. By incorporating layers of images that move at different speeds as the user scrolls, parallax websites offer a sense of depth and engagement that traditional sites often lack. In this guide, we will delve into the process of creating a stunning parallax website using HTML and CSS. Whether you're a beginner looking to enhance your web design skills or a seasoned developer seeking new techniques, this step-by-step tutorial will equip you with the knowledge and tools needed to craft visually striking and engaging websites. Let's dive in and unlock the secrets of parallax design!

Source Code

Step 1 (HTML Code):

Start by creating the basic structure of your website using HTML. This includes defining the layout, adding sections, and setting up navigation elements.

Let's breakdown the HTML code step by step:

1. <!DOCTYPE html>: This declares the document type and version of HTML being used, which in this case is HTML5.

2. <html lang="en">: This declares the document as an HTML file and specifies the language as English.

3. <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and links to external resources like stylesheets and fonts.

<meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports a wide range of characters from different languages.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: Provides compatibility settings for Internet Explorer.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport properties for responsive design.
<title>Parallax Website using HTML and CSS</title>: Sets the title of the webpage that appears in the browser tab.
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">: Links to an external font stylesheet from Google Fonts.
<link rel="stylesheet" href="styles.css">: Links to an external CSS file named "styles.css" for styling the HTML content.

4. <body>: This section contains the main content of the webpage.

<div class="pimg1">: Represents a section with the class "pimg1". This corresponds to a background image with some text overlaying it.
<div class="ptext">: Contains text content that appears over the background image.
<span class="border">: Wraps the text content with a border around it.
<section class="section section-light">: Defines a section with the class "section-light". This section contains some text content.
<h2>Section One</h2>: Represents a level 2 heading with the text "Section One".
<p>: Represents a paragraph of text content.
<div class="pimg2">: Represents another section with a background image and text overlay.
<section class="section section-dark">: Defines a section with the class "section-dark". This section also contains text content.
<h2>Section Two</h2>: Represents another level 2 heading with the text "Section Two".
<div class="pimg3">: Represents another section with a background image and text overlay.
<section class="section section-dark">: Defines another section with the class "section-dark". This section also contains text content.
<h2>Section Three</h2>: Represents another level 2 heading with the text "Section Three".
The pattern continues with more sections and background images.

5. </body>: Closes the body tag.

6. </html>: Closes the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Website using HTML and CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="pimg1">
		<div class="ptext">
			<span class="border">
				The Dream City 
			</span>
		</div>
	</div>

	<section class="section section-light">		
		<h2>Section One</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cumque, error quos cupiditate ad odit rem atque ratione soluta laboriosam dolorum. Distinctio cumque atque totam in ratione voluptatem labore perferendis eum laboriosam accusantium. Facilis, soluta similique consequuntur a harum sapiente dolor, quasi alias, quas blanditiis doloremque dolorum. Doloremque sunt commodi enim nobis earum, ipsa expedita ab distinctio sint non dignissimos corporis dolorum odit consequatur facere reiciendis architecto quam, provident autem quaerat molestias illum. Animi, iure, eaque sapiente atque maiores ipsum nisi. Asperiores, atque, laboriosam. Quasi placeat accusantium harum vero quod voluptatum repellat. Ipsam reprehenderit ad maiores, quas tempora, nesciunt neque?
		</p>
	</section>

	<div class="pimg2">
		<div class="ptext">
			<span class="border trans">
				image two text
			</span>
		</div>
	</div>
	
	<section class="section section-dark">		
		<h2>Section Two</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cumque, error quos cupiditate ad odit rem atque ratione soluta laboriosam dolorum. Distinctio cumque atque totam in ratione voluptatem labore perferendis eum laboriosam accusantium. Facilis, soluta similique consequuntur a harum sapiente dolor, quasi alias, quas blanditiis doloremque dolorum. Doloremque sunt commodi enim nobis earum, ipsa expedita ab distinctio sint non dignissimos corporis dolorum odit consequatur facere reiciendis architecto quam, provident autem quaerat molestias illum. Animi, iure, 
		</p>
	</section>
	
	<div class="pimg3">
		<div class="ptext">
			<span class="border trans">
				image three text
			</span>
		</div>
	</div>

	<section class="section section-dark">		
		<h2>Section Three</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cumque, error quos cupiditate ad odit rem atque ratione soluta laboriosam dolorum. Distinctio cumque atque totam in ratione voluptatem labore perferendis eum laboriosam accusantium. Facilis, soluta similique consequuntur a harum sapiente dolor, quasi alias, quas blanditiis doloremque dolorum. Doloremque sunt commodi enim nobis earum, ipsa expedita ab distinctio sint non dignissimos corporis dolorum odit consequatur facere reiciendis architecto quam, provident autem quaerat molestias illum. Animi, iure, 
		</p>
	</section> 

	<div class="pimg1">
		<div class="ptext">
			<span class="border">
				Amazing place to visit ! 
			</span>
		</div>
	</div>
</body>
</html>

Read Also create a survey form with html and css.jpg

Create a Survey Form with HTML and CSS (Source code)

Step 2 (CSS Code):

Once the HTML structure is in place, use CSS to style and design your website. Customize fonts, colors, layout, and other visual elements to achieve the desired look and feel.

Let's breakdown the CSS code step by step:

1. Global Styles:

body, html: Targets the body and html elements.
height: 100%;: Sets the height of the body and HTML to 100% of the viewport height.
margin: 0;: Removes any default margin.
font-family: 'Poppins', sans-serif;: Sets the font family to 'Poppins' with a fallback to a generic sans-serif font.
font-size: 16px;: Sets the base font size to 16 pixels.
font-weight: 400;: Sets the default font weight to 400.
line-height: 1.8em;: Sets the line height to 1.8 times the font size.
color: #666;: Sets the default text color to a shade of gray.

2. Background Images:

.pimg1, .pimg2, .pimg3: Targets elements with classes pimg1, pimg2, and pimg3.
background-image: Sets the background image for each element.
min-height: Sets the minimum height for the elements, ensuring they cover at least the viewport height.
background-position: Centers the background image.
background-size: Ensures the background image covers the entire element.
background-repeat: Prevents the background image from repeating.
opacity: 0.70;: Sets the opacity of the background image to 70%.
background-attachment: fixed;: Fixes the background image in place, so it doesn't scroll with the content.

3. Sections:

.section: Targets elements with the class section.
text-align: center;: Centers the text content within the section.
padding: Adds padding to the sections to create space around the content.

4. Section Styles:

.section-light, .section-dark: Targets sections with specific classes.
background-color: Sets the background color for these sections.
color: Sets the text color for these sections.

5. Text Styles:

.ptext: Targets elements with the class ptext.
position: absolute;: Positions the text absolutely within its container.
top: 50%;: Aligns the text vertically centered.
width: 100%;: Sets the width of the text to 100% of its container.
text-align: center;: Centers the text horizontally.
font-size: 27px;: Sets the font size of the text.
color: #000;: Sets the text color to black.
letter-spacing: 8px;: Adds spacing between letters.
text-transform: uppercase;: Transforms the text to uppercase.

6. Border Styles:

.ptext .border, .ptext .border.trans: Targets bordered text within .ptext.
background-color: Sets the background color of the border.
color: Sets the text color within the border.
padding: Adds padding around the border.
font-weight: Sets the font weight of the text within the border.

7. Media Query:

@media(max-width: 568px): Applies styles only when the viewport width is 568 pixels or less.
background-attachment: scroll;: Changes the background attachment to scroll for elements with the classes .pimg1, .pimg2, and .pimg.

body, html{
	height: 100%;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8em;
	color: #666;
}


.pimg1{
	background-image: url('http://i.imgur.com/3A73miq.jpg');
	min-height: 100%;
}

.pimg2{
	background-image: url('http://i.imgur.com/M3HrQyO.jpg');
	min-height: 400px;
}

.pimg3{
	background-image: url('http://i.imgur.com/8rwSKp3.jpg');
	min-height:400px;
}

.pimg1, .pimg2, .pimg3{
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.70; 
	background-attachment: fixed;
} 

.section{
	text-align: center;
	padding : 50px 80px;
}

.section-light{
	background-color: #f2f2f2;
	color: #666;
}

.section-dark{	
	background-color: #4c4c4c;
	color: #ddd;
}

.ptext{
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	font-size: 27px;
	color: #000;
	letter-spacing: 8px;
	text-transform: uppercase;

}

.ptext .border{
	background-color: black;
	color: #fff;
	padding: 20px;
	font-weight: 500;
}

.ptext .border.trans{
	background-color: transparent;
}

@media(max-width : 568px){
	.pimg1, .pimg2, .pimg{
		background-attachment: scroll;
	}
}

Final Output:

How to Create a Parallax Website with HTML and CSS.gif

Read Also using tailwind css to build accessible and responsive card component.jpg

Using Tailwind CSS to Build Accessible and Responsive Card Component

Conclusion:

In conclusion, creating a parallax website using HTML and CSS opens up a world of possibilities for elevating your web design projects. By following the steps outlined in this guide, you've learned how to structure your HTML, style your elements with CSS, and implement captivating parallax effects that will impress your visitors. Remember to test your website across different devices and browsers to ensure a seamless user experience.

We hope this guide has empowered you to unleash your creativity and build mesmerizing parallax websites that leave a lasting impression. Thank you for joining us on this journey, and happy designing!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: parallax website, html, css, web design, animation, how to create a parallax website using html and css, step-by-step guide for designing a parallax website, html and css tutorial for beginners, tips for implementing parallax scrolling on a website

End of the article