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:

![enter image description here](https://i.stack.imgur.com/7cjc5.png)