parallax scrolling using css

What is parallax scrolling

Parallax scrolling, also known as “Asymmetrical scrolling”, is a technique in computer graphics and web design, where background images is moved at a different speed than the foreground content while scrolling, creating an illusion of depth in a 2D scene and adding to the immersion.

Below you can find the CSS and HTML on how to create parallax effectCSS

Some mobile devices might have problem with “background-attachment: fixed”. However, you can use media queries to turn off the parallax effect for mobile devices by overriding with “background-attachment: scroll:.
You can adjust the height value of absolute positioned content in mobile devices using media queries.