Can You Blur the Content Beneath/Behind a Div

Blur Behind Div CSS

backdrop-filter: blur(10px);

It will blur area behind the element.

using a div to blur an image behind it?

Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this

UPDATE: Looks like backdrop-filter was recently introduced to Webkit nightly, so eventually we'll be able to do this with CSS only. Yay!

How to blur ALL elements behind a div (text, shapes, buttons - not just the background image). CSS only if possible

I blurred by background image externally, and then took out the blur in css (as people told me to for performance reasons in the comments).

After doing that, and without changing anything else, now my blur works on the navbar! It seems to be that the background blur was messing up a bunch of stuff.

Thank you for the help in the comments!

P.S. The fixed positioning that didn't work before now works?!?

How to blur content behind div?

You should blur image on upload. Then crop other image on upload (or crop it using jQuery/css). Then combine what you have to achieve this effect.

Using css for this task is impossible. Using javascript for this task is bad idea (very slow).

Only option is to use this technique on background image and then place another (cropped with js/upload) ontop of it.

Unfixed/dynamic div shall blur the background image behind it

With this great tutorial and some changings in the CSS I did it:

http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

And its all CSS only!