BLUR a div background with opacity (page background seems blurred through div)

My plan is to take the Windows 7 UI, and recreate it using CSS3. I've already done it w开发者_Go百科ith the 98 theme, but I want to be able to change stylesheets.

The problem arises when I need to blur the background image with low opacity. Is this even possible? Seen below:

It's hard to explain, but I'm going to give it some minimal capabilities (draggable, resizeable etc) So I can't do the two background hack.

Is this possible with jQuery or something similar?

http://jsfiddle.net/BeauAugust/AZRHC/ an example

You'd have a much easier job doing the Windows 7 UI without Aero :)

That being said, I recommend using the Pixastic Library.

Specifically, the Blur Fast effect.

It will require substantial further work to actually use that in the way you're trying to, but I think it's possible.

Ok, there is a single way which works for element's in the background and doesn't require manual reconstruction on canvases... only one problem: it's firefox only for now :P (although webkit has a bug to add it as well and it's awaiting standardization).

Either way, if you want to see an aero implementation of this technique check this out (in firefox): https://developer.mozilla.org/en-US/demosdetail/aero-windows/launch (I made it, so if you have any questions feel free to ask).

The trick is using -moz-element as a background and next a svg filter to blur the background (svg filters can be applied to elements in new browsers).

Either way, except for a proof of concept, the blurring isn't realistically possible.

Try this jQuery plugin, it uses canvas - http://www.blurjs.com/