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:

Solution 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>

Solution 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

Solution 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>

Comments

[blex]

To blur only the background image, your HTML should look more like this: <ion-view class="background-image"></ion-view> <div>header, content, footer</div>

[Germano Plebani]

You have to put .background-image under the content, absolute positioned with lower z-index. stackoverflow.com/questions/20039765/…

[JohnAndrews]

Any idea how to remove the white blur in the corners (should be a seperate question I know), but perhaps you know it quickly.

[Karan Bhutwala]

try dis css .background-image { background: no-repeat center center fixed; background-size: cover; display: block; left: -5px; top:-5px; bottom:-5px; position: fixed; right: -5px; z-index: 1; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; margin:-5px; }