JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page blurme">
	<div id="container">
		<p>blur background image with and opaque container</p>
	</div>
</div>

CSS

body, p {margin: 0; padding: 0;}
		
.page {
    overflow: auto;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
}

.blurme {
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}

#container {width: 500px; min-height: 3500px; margin: 0 auto; border: 5px solid red; background-color: rgba(0,0,0, 0.7);}
#container > p {color: white;}