Bluring bottom of background image

[Constantinff]

Hello everyone, need some assistance
I have div tag with set background picture with 'no-repeat center top' options
The background color of page is pink, and i need somehow to blur the bottom part of the image so to make it merge with the background color. No success for the moment. I created an .png gradient from transperant at the top to pink at the bottom, but didnt find a way to put it over the bottom of background picture. Any other ideas?
Thanks

[swa66]

translucent background images will always create trouble in legacy IE versions AFAIK.

But if you can ignore them, a sliding doors alike technique would be all what you need.

make two wrappers, the outer one gets the image
the inner one gets the gradient as background image linked positioned on its bottom (and transparant as background color)

Also CSS3 multiple background images can help if you don't want to add an extra wrapper. (IE still won't play, even IE8 will refuse to play along with CSS3)

[rocknbil]

Welcome aboard Constantinff.

Digital rendering will always "form a line" at the "last value" before transparency. You can sometimes dither it to hide the abutment, but over the years in these situations I've found it's best to fill the "blended" area of the image with whatever the background color is, then dither the transparency from that so if the image pink is not exactly matching the BG color pink, it will at least hide.

Like

image->blend to pink-> blend to dithered transparency