JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cover-wrapper">
	<div class="cover"></div>
</div>

<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>
<span>Test!</span><br>

CSS

.cover-wrapper {
		position: relative;
	}
	.cover {
		background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("https://i.imgur.com/1CjllnR.jpg");

		background-attachment: fixed;
		background-size: cover;

		width: 50%;
		height: 800px;


		position: relative;
		left: 50%;

		transform: translate(-50%, 0);
	}