Applying a partial gaussian like blur to a background image

Question

I have and image which gets stretched to its full background, regardless of the monitor size.

What i need to do is apply cross-browser blur above this image on only a portion of the left hand side.

So it gives the appearance of a blur on the image. If i apply it to the image then when the screen resolution changes size so does the size of the blur.

Any help would be great.

Cheers

Answer 1

I don't think there is something like that. Especially not if cross browser also means IE6.

What you could do, however, is create a blurred and not blurred version of the image and show the blurred version only where you want it (cropped). If you know what I mean... :)

Answer 2

You could absolutely position a div that has a 50% width and a 100% height. Then made the background of the div about a 50% transparent white background. This might do the trick.

Answer 3

A cursory glance tells me there is no CSS3 thingy for this. Surely this can't be true? Anybody?

For Internet Explorer, there is the proprietary blur filter. Example from the MSDN site:

<DIV STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
Blurry text with smudge of gray.</div>    

Answer 4

Are you looking for something like this http://css-tricks.com/blurry-background-effect/