JSFiddle - React, Tailwind, and code Playground

HTML

<main>
	<div class="cd-fixed-bg cd-bg-1">
		<h1>Title</h1>
	</div> 
 
	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
			</p>
		</div> 
	</div> 
</main>

CSS

body, html, main {
	/* important */
	height: 100%;
}
 
.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}
 
.cd-fixed-bg.cd-bg-1 {
  background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("http://farm5.static.flickr.com/4056/4228935406_93ff14c971.jpg");
}
 
.cd-scrolling-bg {
	min-height: 100%;
}