I want that the whole area behind the highlighted white div box should be blurred but not that the div
1 Answer
Add this to the CSS of your body element (or the one you wanna show blurred).
body {
filter: blur(8px);
-webkit-filter: blur(8px);
}
That 8px
is the intensity of blur effect and can be changed as you like.
Here is an example:
body,
html {
height: 100%;
}
.parent {
height: 100%;
width: 100%;
position: fixed;
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
background-size: cover;
filter: blur(3px);
z-index: 5;
-webkit-filter: blur(3px);
}
.child {
height: 200px;
width: 200px;
z-index: 10;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
position: fixed;
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
background-size: cover;
}
<div class="parent">
</div>
<div class="child"></div>