JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="background"></div>
  <div class="content"></div>
</div>

CSS

.wrapper {
  height:300px;
  width:450px;
  position: relative;
}
.background {
  width: 100%;
  height: 100%;
   background: url("http://lorempixel.com/300/450/") 50% 50% no-repeat;
   background-size: cover;
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   position:absolute;
}
.content{
  width: 100px;
	height: 100px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  border: 2px solid red;
  position: absolute;
  top:35%;
  left:35%;
  filter: none;
}