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.

have you considered using your pseudo elements, `:before` and `:after`? — Jason, Jul 06 '13 at 02:04
is there any way you could mock up what you're trying to do into a jpg or something? i'm kind of confused... — Jason, Jul 06 '13 at 02:06
i see... so you mean instead of just futzing with opacity, you want an actual blur effect on those boxes. — Jason, Jul 06 '13 at 02:20
Exactly. My other option with just came to mind is us a blurred background image for the foreground divs but it would have to be extremely blurry and my still not always align with different bkg images so I still want to know if what I want to do is possible. — Martin Powlette Jr, Jul 06 '13 at 02:26
Duplicate? http://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background — Ondra Žižka, Jul 06 '13 at 02:46

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

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

edited May 23 '17 at 12:19

Community

1
1

answered Jul 06 '13 at 02:27

apaul

16,092
8
47
82

Thanks. And that link helps for something I wanted as well so awesome! – Martin Powlette Jr Jul 06 '13 at 02:56

Ondra Žižka · Answer 2 · 2013-07-06T02:55:25.100

0

You can overlay one picture with another (using divs) and blur the overlay.

<div style="position: relative; background: URL(...)">

<div style="position: absolute; background: URL(...); 
       top: ...; left: ...; width: ...; height: ...; filter: blur(3px)">

Update: Here it is in perfection: http://css-tricks.com/blurry-background-effect/

edited Jul 06 '13 at 02:55

answered Jul 06 '13 at 02:14

Ondra Žižka

43,948
41
217
277

Here's my issue though. That may work for #menu but not #logo because as the browser resizes the blur won't match the image. – Martin Powlette Jr Jul 06 '13 at 02:24
Hmm... how about having another image, blurred, and pushing it's position up for the menu and logo? That would, by the way, cost less CPU on client's side... but more bandwidth. – Ondra Žižka Jul 06 '13 at 02:34
Also, how about a small cheat - a semi-transparent light-grey background. I know, not really the same. – Ondra Žižka Jul 06 '13 at 02:36
I've thought about that but my thing is I want the background to change and make sure it's always perfect interms of alignment. – Martin Powlette Jr Jul 06 '13 at 02:43

Blur a specific portion of a background image

2 Answers2