Fixed-position Parallax Scroll Effect With Pure CSS

Preview:

Description:

A pure CSS solution of implementing a fixed-position parallax effect on background images when scrolling down the webpage. Works both on mobile and desktop.

How to use it:

The html structure for the parallax area.

<div class="parrallax-content">
  <div class="parrallax">
  </div>
</div>

Add a background to the parallax area.

.parrallax-content{
  background-image: url(1.jpg);
}

The core CSS styles for the parallax scroll effect.

.parrallax-content{
  position: relative;
  overflow: hidden;
  height: 80vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

.parrallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.parrallax:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -1;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 120% auto;
}