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:
Step 2: We will put necessary codes to set up Parallax
Step 3: Calling out CSS through HTML
Now the all codes together looking like:
How it working on your web project don't forget to mention :)
How to Create 'Parallax' background on Webpages
Step 1: We will create a CSS IDStep 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
Step 3: Calling out CSS through HTML
Now the all codes together looking like:
How it working on your web project don't forget to mention :)
0 comments:
Post a Comment