Mysterious Background Colors on HTML Buttons with Image Backgrounds in Safari and Chrome

?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:

Mysterious Gray/Alpha effect on HTML button in Safari/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:

 background-color: none;

to

 background-color: transparent;

Now, the image appears as it should:

Buttons no longer showing mysterious background/alpha effect in Chrome/Safari

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: