JSFiddle - React, Tailwind, and code Playground

by yrkanik

HTML

<div class="parallax">
<div class="bg__1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</div>
</div>
<div class="bg__2">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
<div class="bg__3">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
<div class="bg__4">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<div class="inner">
</div>
</div>

CSS

[class*="bg__"] {	overflow: hidden;
height: 100vh;


/* fix background */
  background-attachment: fixed;

  /* center it */
  background-position: center top;

  /* Scale it nicely to the element */
  background-size: cover;

  /* just make it look a bit better ;) */
  &:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
  }
}

.bg__1 {
  background-image: url(http://bgfons.com/upload/wood%20_texture38.jpg);
 
}

.bg__2 {
  background-image: url(http://bgfons.com/upload/wood%20_texture43.jpg);
}

.bg__3 {
  background-image: url(http://bgfons.com/upload/wood%20_texture44.jpg);	
  );
}

.bg__4 {
  background-image: url(http://bgfons.com/upload/wood%20_texture42.jpg);
}

JavaScript

svsd