Trouble with transparent image on gradient background using html/css

Question

I have a website where the background has a light gradient (light gray from top to white on the bottom). When I place an image with a transparent background on the website, the background of the image picks the top color of the gradient. So instead of the image's background appearing to be a gradient as well and blending in with the site, the image's background color is just light gray.

I'm not sure if this is the way it's suppose to be (due to the way transparency works on websites). But I was wondering if anyone could provide a workaround

Answer 1

First of all welcome to StackOverflow :)

It depends. First of all, your website will be rendered differently on different browsers, and that's of vital importance to you, because unless you test it on different browsers, you can't be sure what some users will see.

If you've seen a partially transparent PNG that instead of transparency shows a grey background, chances are you're using Internet Explorer 6, a very old browser that you really shouldn't use. It's the one with the blue E, that E stands for Evil. Run.

On a more serious note, having a link to check would help, or a screenshot, because it's hard to tell just by guessing. PNGs should render fine against any background.