JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<div id="wrapper"> <!-- contains top image -->

<div id="header"></div> <!-- contains the page title image -->

 <div class="block"> <!-- contains 55% opacity background image -->
  <h3>Block 1</h3>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus consectetur augue id ultricies. Morbi rutrum consequat mauris, facilisis laoreet metus sagittis non. Maecenas id felis vel tellus aliquet aliquet eu et orci. Vivamus sit amet neque sem, at lacinia leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec turpis sapien, vitae ornare neque. Nunc vel ipsum sed risus posuere tristique. Aliquam tristique sem eget velit accumsan faucibus. Integer varius diam nec neque eleifend sagittis. Cras nec nisl non nisl fermentum facilisis et ut odio. Donec ultricies ullamcorper augue ac rhoncus. Quisque vehicula eros ut lacus bibendum ultricies.</div>
 </div>

 <div class="block">
  <h3>Block 2</h3>
  <div class="content">Vestibulum id ultrices diam. Vestibulum enim nisl, feugiat eu elementum et, ullamcorper ac ligula. Donec vitae dui sem. Morbi mattis mollis enim pellentesque tristique. Aenean pretium quam a orci blandit nec imperdiet nunc pretium. Donec a libero non enim ultricies feugiat. Quisque at lectus congue felis viverra semper sit amet quis magna. Mauris ut nisl ut est feugiat rutrum ac at eros. In porttitor vestibulum diam. Aliquam vitae dui ac ipsum tempor hendrerit in sed ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar elementum enim ut pretium.</div>
 </div>

 <div class="block">
  <h3>Block 3</h3>
  <div class="content">Sed molestie metus ac est tristique pharetra. Vestibulum pretium molestie sapien, eget tristique purus sodales eu. Pellentesque cursus placerat tincidunt. Quisque velit lacus, pharetra sit amet viverra sed, aliquet id nisl. Vivamus ut tempus orci. Integer id ultrices dolor. Curabitur eu tellus vitae turpis ullamcorper euismod. Nunc fringilla erat id...

CSS

body {background: #333; color: #ddd;}
a:link { color: #ddd; }
a:hover { text-decoration: underline; }
a:visited,a:active { color: #999; }

/* Tiled background image */
body {
 margin: 0;
 padding: 0;
 /* Use height of header image for top position */
 background: #000 url(https://2.bp.blogspot.com/-yoacGtVJQ4o/Ta2M6iJiLVI/AAAAAAAAACw/XuY_7_Yhh-A/s200/bgtile.jpg) left 1080px repeat-y;
}
/* Top background image (1920x1200) */
#wrapper {
 position: relative;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background: url(https://2.bp.blogspot.com/-6vIxC2INCc0/Ta2M5xmVREI/AAAAAAAAACo/T-dk_UmEdB4/s200/bg1.jpg) center top repeat-x;
 z-index: 100;
}
/* Page Title image */
#header {
 height: 350px;
 background: url(https://1.bp.blogspot.com/-9_howS6OiMI/Ta2M7EuxbWI/AAAAAAAAAC0/8C9-4BQrVSg/s200/title.png) center 40px no-repeat;
}
/* Content Block with 55% opacity background image */
.block { 
 width: 400px;
 height: 500px;
 margin: 20px auto;
 border: #333 1px solid;
 padding: 20px;
 background: url(https://1.bp.blogspot.com/-eywohnk1LMk/Ta2M6St6EPI/AAAAAAAAACs/7RYel72y0Tw/s1600/bg-black-55.png);
}
.block h3 {
 font-family: 'Arial Black', Gadget, sans-serif;
 font-size: 130%;
}

JavaScript

// defaults
  var st, win = $(window)[0],
   body = $('body')[0],
   doc = (jQuery.support.boxModel) ? document.documentElement : document.body,
   wrap = $('#wrapper')[0],
  
   // Set top background image height here
   imgH = 1080; // top image height

  // vertical parallax scroll
  $(win).scroll(function(){
   st = (win.pageYOffset || doc.scrollTop );
   if (st < imgH) { wrap.style.backgroundPosition = 'center ' + (st/4) + 'px'; } // limit moving top image only when in view
   body.style.backgroundPosition = 'left ' + ( imgH + st/4) + 'px';
  });