Blur background - Jquery / Pure CSS / Image?

Question

I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.

The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app

(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)

but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!

Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?

Yea. I used photoshop and made a gradient image with opacity of 50%. made it a 1px wide png and spanned it across the background of my top div. Then whereever it was, it had a slight gradient of purple background, but the page background was still visible through it. At least, that's the closest thing I can think of I've done and how I did it. — SpYk3HH, Jun 17 '13 at 13:04
my only suggestion would be to try using z-index although not sure if that helps in this case — j0hnstew, Jun 17 '13 at 13:05
@SpYk3HH there's no reason to use a separate image with modern browsers; even IE6 had the ability to render solid backgrounds with partial transparency. — Pointy, Jun 17 '13 at 13:05
This kind of thing is not possible with CSS alone. You could probably write a plugin to re-sample the area of background the div covers, add some blur, then put it into the bg of the div, but that might be a bit of work for both you and the browser. It's a greateeffect to want though. — Kyle, Jun 17 '13 at 13:06
@Pointy if you have to load an image already, why waste extra resources if the image already has the opacity? That's why I did it. I have photoshop and so it was just as easy as making a straight background — SpYk3HH, Jun 17 '13 at 13:06
see this [LINK](http://stackoverflow.com/questions/4477619/bluring-a-div-with-css) — Aravind30790, Jun 17 '13 at 13:07
Cheers for the advice chaps - though a background image will just give me an opaque effect and I need to actually blur the background - as in the link above. Cheers — Dancer, Jun 17 '13 at 14:04

score 3 · Answer 1 · answered Jun 17 '13 at 13:15

3

There is a jQuery plugin called blur.js that claims to do what you want. Haven't checked it though.

answered Jun 17 '13 at 13:15

Wojciech Budniak

102
5

5

This is a [link-only answer](http://meta.stackexchange.com/q/8259). Please add context for your link. – tckmn Jun 17 '13 at 13:16
4

@Doorknob sometimes all we need is a link... thanks Wojciech Budniak – NodeDad Nov 27 '13 at 04:24

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

I don't know if this will help, but it gives a blur effect. A similar question was asked here:

Background blur with CSS

The developer used a svg blur to give a blur effect.

Don't know if that helps.

edited May 23 '17 at 12:23

Community

1
1

answered Jun 17 '13 at 13:09

Carson Wright

323
3
12

1

This is a [link-only answer](http://meta.stackexchange.com/q/8259). Please add context for your link. – tckmn Jun 17 '13 at 13:16

score 1 · Answer 3 · answered Oct 06 '13 at 20:44

I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixed on both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:

<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
    <div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
    <div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px);  position: absolute;">

    </div>
    </div>
    <div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
        <p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
    </div>
</div>
</body>

I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.

Unfortunately, even today browser support is very limited on this. E.g. all IE versions and Edge are incapable of using filters. — Simon Steinberger, Nov 01 '15 at 18:51

score 0 · Answer 4 · answered Jun 17 '13 at 14:06

you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.

Blur background - Jquery / Pure CSS / Image?

4 Answers4