JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bg_img_wrapper">
<div id="bg_img"></div>
<div id="bg_img_scaled"></div>
</div>
CSS
body{
background-color: #0F0;
margin: 0;
padding: 0;
}
#bg_img{
filter: blur(3vh);
-webkit-filter: blur(3vh);
position:absolute;
width: 100%;
height: 100%;
background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
z-index:3;
}
#bg_img_scaled{
filter: blur(3vh);
-webkit-filter: blur(3vh);
position:absolute;
width: 100%;
height: 100%;
background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
-webkit-transform: scale(1.2);
transform: scale(1.2);
z-index:2;
}
#bg_img_wrapper{
position:absolute;
width: 100%;
height: 100%;
overflow: hidden;
}