How to Create 'Parallax' background on Webpages

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. In modern web design Parallax is a popular term and most wanted feature. Here in this article how to create 'Parallax' background on Webpages shown, Read on:

How to Create 'Parallax' background on Webpages

Step 1: We will create a CSS ID

#parallax {}

Step 2: We will put necessary codes to set up Parallax 

• We used 'position: relative' cause The element is positioned relative to its normal position

• In 'background url' Place your image link

• We used 'background-attachment: fixed' cause The background is fixed with regard to the viewport

• We used 'background-size: cover' cause Scale the background image to be as large as possible so that the background area is completely covered by the background image.

• The 'height:400px' represent the Parallax area

#parallax { 
position: relative;
background:url(Image Link);
background-attachment: fixed;
background-size: cover;
height:400px;
text-align: center; 
}

Step 3: Calling out CSS through HTML

<div id="parallax">
Place your header code/text or any other elements
</div>

Now the all codes together looking like:

<style>
#parallax { 
position: relative;
background:url(Image Link);
background-attachment: fixed;
background-size: cover;
height:400px;
text-align: center; 
}
</style> 

<div id="parallax">

</div>

How it working on your web project don't forget to mention :)