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:

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:

• javascript
• html
• css
• ionic-framework

• 2 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> – blex Commented Jun 25, 2015 at 13:32
• 1 You have to put .background-image under the content, absolute positioned with lower z-index. stackoverflow.com/questions/20039765/… – Germano Plebani Commented Jun 25, 2015 at 13:33

3 Answers 3

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>

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

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

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

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