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

Question

I am trying to have a blurred background for my content.

So far I 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 then I get the problem that the whole screen is blurred and not only the background as follows:

Answer 1

put content out side the 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>

Answer 2

there is an other way come to my head which is add second background-image, which in css3 you can have multi background for one element, and the second one can be a blur image, even with low quality , like this

in sass

#element
 background:
  image: url(/*first url*/), url(/*second url*/)
  size: auto auto /*first one*/, 100% 100% /* second one*/

i guess second will cover first or revers , you can try it out

Answer 3

Put the image outside the other div... Like this:

<div class="background-image"></div>

<div class="content">
<p>Here goes your content</p>
</div>