JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ScalableImage"></div>
<div id="BlockWhite" style="height:1000px"></div>
<div id="BlockBlue1" style="height:300px"></div>
<div id="BlockBlue2" style="height:50px"></div>

CSS

body, html{
    height:100%;
    margin:0;
}

#ScalableImage {
display:block;
width:100%; 
height:100%;
max-height:900px;
background: #000 url(/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
  }

#BlockBlue1 {
position:relative;
float:left;
background-color:#c5d1d1;
width:110%;
margin-left:-10px;
margin-bottom:-10px;
min-height:20px;
clear:both;
}
#BlockBlue2 {
position:relative;
float:left;
background-color:#95aab2;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}

#BlockWhite {
position:relative;
float:left;
background-color: #fff;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}