Transparent PNG not working in Chrome/FF

HTML & CSS
1

Hello,

Got a strange problem with an image.

It’s set as the background image for a form submit button and works fine on one page but on another it’s showing an IE6 style grey background (even in FF), the code is almost identical. I’ll post the code if necessary, but I’m hoping that someone’s encountered this before and has a quick fix.

Cheers,

Jon

2

Hi,

Have you got a link to the problem so we can test?

Firefox did change it’s color correction but if you are having a problem in chrome also then it’s unlikely to be the cause.

3

Rather not link to the development site but I’ve recreated it here:

http://www.optimalwebdesign.co.uk/demo/button_test.htm

I’ve shown the image called in an img tag, an input CSS background, and a background on a div, any ideas?

Cheers,

Jon

4

I’ve resolved it by setting:

background-color:transparent;

  • in the input’s styles

The strange thing is that I didn’t do that in another area of the site and it was fine…

Cheers,

Jon

5

Inputs have a background color by default and if you have a transparent image then the background will show through :slight_smile:

If you’d use the shorthand for background then that would have reset the background color to default without the need for the extra rule.


background:url(img.gif) no-repeat 0 0;
6

I’ll bear that in mind.

Thanks,

Jon