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://www.mishelshaji.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