I have a site that I am working on (shown at a temporary development copy) where I was attempting to use a transparent gradient in a PNG to create a "fade-in" effect at the bottom of the site. This would be a fade from the background color of the site to transparent, so that it would fade in nicely when overlaying content and disappear when overlaying the background.
The fade-in over content works nicely. However, when overlaying the background color (as seen to the right and left of the middle photograph), there is a band where the transparency ought to be.
I've tried several combinations of gamma settings and color profiles and browsers, but everything seems to be correct. Is this a known issue with some PNG renderers?
Thanks. Incidentally, this development copy is temporary, but I'll link to where the final version will reside for posterity.
You could try re-doing the image as .PNG and then use TweakPNG to actually remove the gamma information.
If you're using Photoshop, make you image as a gradient from the background color to transparent, do a Save for Web... as PNG, then throw it in TweakPNG and that should be it.
Here's the link to pick up TweakPNG: http://entropymine.com/jason/tweakpng/
i'm not sure i exactly follow what your asking because it looks like you've already got the fade...but i think your asking how to make your site (the dark box with the images) fade at the bottom to the background color. In your image editing software have a layer over the site image that fades from transparent (top) to the color of your BG (bottom). does that make sense