JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="bg-img"></div>
  <div class="section1">lorem ipsum dolar imit</div>
  <div class="section3"></div>
  <div class="section1">lorem ipsum dolar imit</div>
  
</div>

CSS

html,body{margin:0; padding:0;height:100%;}
.container{height:800px; position:relative;}
.section1{width:100%; height:400px; background-color:purple;color:white; z-index:10;} 
.section2, .section3{ width:100%; height:300px; overflow:hidden; position:relative;}

.bg-img{
  position:fixed;z-index:-100;
  width:100%;height:100%;height:100vh;
  background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;
  background-size:cover;
}