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

Could you provide examples or a url to the problem. From what you've described it should work — Ben Rowe
– Ben Rowe, Commented Jun 22, 2010 at 6:07

Camilo Martin · Accepted Answer · 2010-06-22 06:12:45Z

2

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.

answered Jun 22, 2010 at 6:12

Camilo Martin

38.1k22 gold badges121 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble with transparent image on gradient background using html/css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related