Ich versuche, einer Schaltfläche (oder einem Link mit derselben Klasse), die bereits eine Hintergrundfarbe hat, ein Hintergrundbild hinzuzufügen.

Hier ist die Jsfiddle:http://jsfiddle.net/BNvke/

Die Schaltfläche selbst sieht gut aus, aber ich versuche, sie so zu gestalten, dass beim Hinzufügen einer bestimmten Klasse der Abstand angepasst und ein Hintergrundbild angezeigt wird, das jedoch nicht angezeigt wird. Hier ist das CSS / HTML:

.button {
padding: 10px; 
margin-right: 8px;
margin-bottom:10px;
font-family: Arial, Tahoma, Verdana, FreeSans, sans-serif;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
display: inline-block;
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px; 
-webkit-border-radius:4px; 
box-shadow:1px 1px 2px 0 #CCCCCC;
-moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}

.button_blue {
border: 1px solid #305875;
color: #FBFBFB;
background-color: #3D6E97;
}

.button_blue:hover {
color: #FBFBFB;
opacity:0.9; 
filter:alpha(opacity=90);        
}

.button_about { 
background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
padding-left: 35px;
padding-right: 15px;
}​

-

<p><a class="button button_blue">Without Background</a></p>

<p><a class="button button_blue button_about">With Background</a></p>​

Wie kann ich dieses Hintergrundbild anzeigen lassen?