javascript - How to blur only background and not content in Ionic/CSS -

i trying have blurred background content.

so far tried this:

.background-image {   background-image: url('../img/background/image.jpg');   width: 100vw;   height: 100vh;    -webkit-filter: blur(10px);   -moz-filter: blur(10px);   -o-filter: blur(10px);   -ms-filter: blur(10px);   filter: blur(10px); } 

and then

<ion-view class="background-image">    // header, content, footer etc <ion-view> 

but problem whole screen blurred , not background follows:

put content out side blurred div.

.background-image {   background-image: url('../img/background/image.jpg');   width: 100vw;   height: 100vh;    -webkit-filter: blur(10px);   -moz-filter: blur(10px);   -o-filter: blur(10px);   -ms-filter: blur(10px);   filter: blur(10px); }  <div class="background-image"></div>  <div>content</div>