JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
	<img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
    <div class="text">Scroll down</div>
</div>
<div class="wrap">
	Here is some content
</div>

CSS

html, body {height: 100%}

	body {
		padding: 0;
		margin:0;
		font-family: sans-serif;
	}
	.image {
		position: relative;
		left: 0px;		
		height: 100%;
		background-position: 50% 50%;
		background-size: cover;
		background-attachment: scroll;
		text-align: center;
	}
	img {
	  max-width: 90%;
	  max-height: 70%;
	  margin: auto;
	  position: fixed;
	  top: 0; left: 0; bottom: 0; right: 0;
	}

	.text {
		position: fixed;	
		bottom: 20px;
		left:50%;
		margin-left: -44px;
	}
	.wrap {
		background-color: lightblue;
		text-align: center;
		padding: 100px;
		font-size: 30px;
		min-height: 1000px;
        position:relative;
	}