JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="blur">
   <div class="before"></div>
  </div>
</div>

CSS

html, body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
.wrap{
  position:relative;
  height:100%;
  background-image:url("https://pastoralb.files.wordpress.com/2015/12/autumn-leaves.jpg");
  background-size:cover;
	background-position:center center;
}
.blur{
  position:absolute;
  width:30%;
  padding-bottom:30%;
  border-radius:50%;
  border:2px solid #333;
  left:50%;
  margin-left:-15%;
  top:50%;
  margin-top:-15%;
  overflow:hidden;
}
.blur .before{
  width:100%;
  height: 100%;
	display:block;
	position:absolute;
  border-radius:50%;
background-image:url("https://pastoralb.files.wordpress.com/2015/12/autumn-leaves.jpg");
	background-position:center center;
	-webkit-filter:blur(3px);
  filter:blur(3px);
}

JavaScript

function scaleBg(parent, child){
	var width = parent.clientWidth;
	var height = parent.clientHeight;
	child.style.backgroundSize = width + "px" + " " + height + "px";
}

window.onload = function(){
	var parent = document.querySelector(".wrap");
  var child = document.querySelector(".before");
  
  scaleBg(parent, child);	
	
  this.onresize = function(){
		scaleBg(parent, child);	
	}
}