How to create parallax scrolling effect

Parallax scrolling is a design trend in which the background of the web page moves at a slower speed to it’s foreground while scrolling. Here’s an example of a web page with parallax scrolling effect.

HTML Markup

<div class="parallax-effect">    
    <p>Scroll Up and Down this page to see the parallax scrolling effect</p>
<h4 style="background-color:white;font-size:36px;margin-top:100px;">Scroll Up and Down this page to see the parallax scrolling effect.</h4>
</div>

Add CSS

.parallax-effect{  
    background-image: url("https://static.geekinsta.com/wp-content/uploads/2018/10/bg_img_01.jpg");
  min-height: 1000px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Try it Yourself