JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
<div id="headerblock">
</div>
<h1 style="color:white">This is my header text</h1>
</div>

CSS

#header{
	background-image: url(img/head.jpg);
	background-size: 100%;
	height: 520px;
	width: 100%;
	top:49px;
	position: absolute;
	margin:0 auto;
	text-align:center;
}

#headerblock{
	background-color:#444444;
	opacity:0.7;
	filter:alpha(opacity=70);
	width:100%;
	position:absolute;
	height:200px;
}

h1 {
    position:relative;
    z-index: 500;
}
}