How to create parallax scrolling for background images in css

parallax scroll background css

Parallax Scrolling

Parallax scrolling is a scrolling technique used in web development in which a fixed background is applied and the content over it would move when the user scrolls down or up. One way of attaining this effect is as follows:-

* {
  font-family: "Josefin Sans", sans-serif;
  text-align: center;
    color:#fff;
}


.parallax-scroll {
    /* The image used */
    background-image: url("place-your-background-here.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.text{
  height:1000px;
  font-size:36px;
  padding-top:200px;
  background: rgba(0,0,0,0.5);
  
}

And the HTML Code is as follows:-

<div class="parallax-scroll"> 
<div class="text"> <h1> Scroll Up and Down this page to see the parallax scrolling effect. </h1> </div>
<h1> Tada! 🙂 </h1>
</div>

Explanation:

background-image:The background-image property sets one or more background images on an element.We can give url path.
background-attachment: It determines whether that image’s position is fixed within the viewport, or scrolls along with its containing block.
background-repeat: It defines how the background images are repeated. A background image can be repeated along the vertical axis and the horizontal axis,both axes, or not repeated at all.
background-size: It specifies the size of an element’s background image.

And for the demo, click here.