JSFiddle - React, Tailwind, and code Playground
HTML
<div class="sky"></div>
<div class="red"></div>
CSS
.sky {
height:10000px;
width:100%;
position:absolute;
top:0px;
left:0px;
background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg);
z-index:1;
}
.red {
height:10000px;
width:50%;
position:absolute;
top:0px;
right:25%;
background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg);
z-index:2;
background-position:center;
}
JavaScript
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var divam = 1.2;
$(".sky").css({
"top":scrollTop/divam+"px",
"height":10000-(Math.round(scrollTop/divam))+"px"
});
});