Is it possible to use iOS7-like blur effect only on the background?

Question

I've been trying to add blur effect like seen in iOS7 control center, with the following code, which comes from the accepted answer of this question.

body {
    -webkit-filter: blur(20px);
    opacity: 0.4;
}

However, when I wrote the above snippet and ran the app, it displays the blur effect all over the screen, and hence the contents there are not readable. However, the example below only affects the background properly, since I override the blog contents' background-color

body {
    background-color: red;
}

.blog {
    background-color: white;
}

That being said, if I attempt to take the same approach with the following code, which should override the background:

.blog {
    -webkit-filter: blur(0px);
    opacity: 1.0;
}

It still blurs all over the window. So why does such discord occur?

I would like to affect the blur only on the background - in other words, I don't want it to make an influence on something like a header, footer, blog post, aside section's contents (like blog tag categories), advertisement, etc...

I use HTML 5 and CSS 3 with Chrome browser and Stylus and Bootstrap 3.

[Update]

I wouldn't like to use an additional background image - just want to make the background be blur.

You can also take a look at Chris Coyier's technique to achieve this effect: http://css-tricks.com/blurry-background-effect/ — Nadeem Khan, Apr 15 '14 at 10:38

score 3 · Accepted Answer · answered Apr 11 '14 at 18:30

3

There are a few ways you can do this, but they will all involve the same basic steps.

Since the blur effect acts on the entire element, not just the background, you need a dedicated element that will contain the background and the effect applied to it. Then you just overlay the rest of the content over it.

Here is my attempt: http://jsfiddle.net/83aBP/

.background {
  height: 100%;
  width: 100%;
  background: url(http://i.imgur.com/Zz5bPNl.png);
  background-size: cover;
  position: fixed;
  -webkit-filter: blur(20px);
  opacity: 0.8;
}

.content {
  position: relative;
  color: white;
  z-index: 10;
}

answered Apr 11 '14 at 18:30

Dan Turkov

155
3

+1 for the filter, but you can improve this using pseudo elements to avoid non semantic markup http://jsfiddle.net/coma/83aBP/2/ – coma Apr 11 '14 at 23:31
Does this require an additional image file? Is it feasible to just add an blur effect? It looks like removing `background: url();` doesn't work... – Blaszard Apr 12 '14 at 00:33
@Gardecolo, see my answer as I believe it fills your needs perfectly. – SimplyAzuma Apr 15 '14 at 12:00
@Gardecolo, the background image I used was just an example. You need some kind of background image to create the blur effect on, otherwise it will just be a solid color (if the background has a color defined). – Dan Turkov Apr 16 '14 at 17:39
@coma, yes, that is a cleaner solution, but some browsers ( – Dan Turkov Apr 16 '14 at 17:40
@dntrkv: (http://caniuse.com/#search=background-size , http://caniuse.com/#search=filter ) vs http://caniuse.com/#search=before ? The more compliant method is using an already blurred image... – coma Apr 16 '14 at 17:43
@coma - Yes, but without background-size, the code will degrade gracefully since it's not essential for everything to show up correctly. It's more of a nice-to-have. – Dan Turkov Apr 16 '14 at 17:48
Sorry I got a flu and have not been able to react to the discussion. Dan, thanks, I gave you my bounty. – Blaszard Apr 18 '14 at 15:09

score 0 · Answer 2 · answered Apr 15 '14 at 10:31

Keep the background in a separate container than the body like this:

<div id="background"></div>
<div id="body"></div>

Then you can achieve the iOS 7 parallax effect by applying the following filter to the background:

#background {
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.4;
}

#body {
  color: #fff;
  position: relative;
  z-index: 100; 
  margin:0;
  padding:0;
}

score 0 · Answer 3 · answered Apr 15 '14 at 11:59

I have used this jQuery plugin in the past and it has worked quite well: http://blurjs.com/ It sounds like it is exactly what you are looking for. This is the only method I have found to blur the content behind the background.

If this isn't what you are looking for let me know and I will find a suitable solution.

Is it possible to use iOS7-like blur effect only on the background?

3 Answers3