?I am working on a project with lots of HTML/CSS. The client provided some background images to skin the form buttons with. Easy enough, right! The graphics were in PNG format and had a transparent background. Nevertheless, Safari and Chrome applied a gray “background” to the buttons.
I double and tripled checked to see what CSS property might be causing this. Here’s how the buttons looked in Safari and Chrome:
Here’s the CSS:
position: relative; width: 50px; height: 19px; border: none; font-family: Myriad Pro, Trebuchet MS, Arial, Sans-Serif; font-size: 12px; padding: opx background-image: url('../images/buttonBG.png'); background-repeat: none; background-color: none; background-alpha: 1;
So what was the problem? background-color! Apparently ‘none’ was not a good option. To fix, I changed:
Now, the image appears as it should: