JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body{margin:0; padding:0;}
.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;}
.section3-img{background-size:cover;z-index:-100;width:100%;height:300px;position:absolute; 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;}