title: How to blur only background and not content in Ionic/CSS
body: <p>I am trying to have a blurred background for my content.</p>
  
  <p>So far I tried this:</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>and then</p>
  
  <pre><code>&lt;ion-view class="background-image"&gt;
     // header, content, footer etc
  &lt;ion-view&gt;
  </code></pre>
  
  <p>But then I get the problem that the whole screen is blurred and not only the background as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/7cjc5.png" alt="enter image description here"></p>