JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="wrapper">
		<div id="div1">
			<div id="center">
				
			</div>
		</div>
		<div id="div2">
		You can't see this without scrolling
		</div>
	</div>
	</body>

CSS

#wrapper{
				width: 100%;
			}
			#div1, #div2{
				position: absolute;
				height: 100%;
				width: 80%;
			}
			#div1, #div2, img{
				left: 0;
				right: 0;
				margin: auto;
			}
			#div1{
				background-color: red;
                background-image: url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 40% auto;
			}
			#div2{
				background-color: blue;
				top: 100%;
			}