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:

enter image description here

To blur only the background image, your HTML should look more like this: `
header, content, footer
` — blex, Jun 25 '15 at 13:32
You have to put .background-image under the content, absolute positioned with lower z-index. http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image — Germano Plebani, Jun 25 '15 at 13:33

score 7 · Accepted Answer · answered Jun 25 '15 at 13:37

7

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>

answered Jun 25 '15 at 13:37

Karan Bhutwala

777
10
17

Any idea how to remove the white blur in the corners (should be a seperate question I know), but perhaps you know it quickly. – WJA Jun 25 '15 at 13:41
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; } – Karan Bhutwala Jun 25 '15 at 13:43

score 3 · Answer 2 · answered Jun 25 '15 at 13:41

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

score 2 · Answer 3 · answered Jun 25 '15 at 13:39

2

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

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

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

answered Jun 25 '15 at 13:39

Matthijs Otterloo

590
5
13

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

3 Answers3