JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<body>
		<div class="block">
		</div>
		<div class="header"><div class="header-image"></div></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

CSS

html, body {
	height: 100%;
	margin: 0px;
	perspective: 1px;
	transform-style: preserve-3d;
	overflow-x: hidden;
	overflow-y: scroll;
}

.header {
	height: 256px;
	overflow: hidden;
	background-color: #222;
}

.header-image {
	height: 256px;
	background-image: url('https://placehold.it/600x400');
	background-position: center;
	background-repeat: no-repeat;
	transform: translateY(-50vh) /* Top of screen */ translateY(128px) /* Middle of header */ translateZ(-1px) /* Back */;
}

.block {
	position: fixed;
  overflow-y: hidden;
	width: 100%;
	height: 256px;
	background-color: rgba(255, 0, 0, 0.5);
	z-index: 10000;
}