JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-box">
    <div class="content-bg"></div>
    <div class="content">
         <p>Text with blurred background</p>
         <p>Text with blurred background</p>
    </div>
</div>

CSS

body {
    background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-size: no-repeat fixed center center cover;
    overflow: hidden;
}

.content-box {
    position: relative;
    width: 300px;
    overflow: hidden;
}

.content-bg {
    position: absolute;
    background-size: cover;
    background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-size: no-repeat fixed center center cover;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

.content {
    border-radius: 10px;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0.99999; /* Does not work without this wtf */
    color: white;
}
.content :first-child { margin-top: 0px }

JavaScript

function updateBackground() {
    var contentBox = $(".content-box");
    var bg = $(".content-bg");
    bg.css("left", -(contentBox.offset().left));
    bg.css("top", -(contentBox.offset().top));
    bg.width($(window).width());
    bg.height($(window).height());
}

$(window).resize(function() {
    updateBackground();
});

updateBackground();