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

(;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%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.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 bo?

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.%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo..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 bo?

• javascript
• jquery
• html
• css

• 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 Commented Jun 17, 2013 at 13:04
• my only suggestion would be to try using z-index although not sure if that helps in this case – j0hnstew Commented Jun 17, 2013 at 13:05
• 1 @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 Commented Jun 17, 2013 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 Commented Jun 17, 2013 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 Commented Jun 17, 2013 at 13:06

4 Answers 4

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

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.

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 pletely 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.

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.