Blur a specific portion of a background image

Question

Let's say my site is arranged like this in terms of layers.

• Background Image ( background-size:cover;)
• 500 x 500 div with a semi-transparent white background.
• Content within the div.

What I'd like is that the area under the div (on the background image) to be be blurred. My problem is that with varying screen sizes, I can't have the background image "pre-blurred" because that div will not always be aligned with the background.

So my question is, is it possible to blur a specific portion of a background image on the fly by maybe defining the region like I would for the div? For example position:absolute; top:45% right:0; Or what's my best cross-browser options. CSS or other wise, it doesn't matter.

Thanks

---

On a side note I've thought about having a div inbetween the background and the previously talked about div with a background image the same as the one behind it but set it's background position to match the foreground div and just blur it. Kinda like zooming into a photo in programs like ps and the box in the navigator refers to only that part of the image being showed.

Answer 1

This may be a little heavy for what you're trying to do, but you could use Blur.js

$('.target').blurjs({ 
    source: 'body',
    radius: 10, 
});

Should you need to blur more than just the background, checkout:
https://stackoverflow.com/a/17134789/1947286