The most simple way to understand the parallax effect using css. The demo sites are included. The real hand-code example added.

1. Parallax Effect
Using CSS
www.ewiglife.com

2. Parallax Effect
• Parallax scrolling is a web site trend where the
background content (i.e. an image) is moved at a
different speed than the foreground content while
scrolling.

3. Demo sites
• https://www.w3schools.com/howto/tryhow_css_parallax_demo_none.htm
• https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
• https://www.ewiglife.com/
• https://dogstudio.co/
Note:
Parallax scrolling does not always work on mobile devices/smart phones. However, you can
use media queries to turn off the effect on mobile devices.

4. How to create
• Use a container element and add a background image to the
container with a specific height. Then use the background-
attachment: fixed to create the actual parallax effect. The other
background properties are used to center and scale the image
perfectly.
Scroll Up and Down this page to see the parallax scrolling effect. This
div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove
the scrolling effect.

5. Parallax HTML/CSS Code

6. Output
Output
• Check your screen output
• Output according to pixels
Next Step
• Now do with percentage (%)
• Just replace px to %