Aggiungere un’immagine di sfondo al pulsante usando CSS (jsfiddle)

Sto cercando di aggiungere un’immagine di sfondo a un pulsante (o collegamento con la stessa class) che ha già un colore di sfondo.

Ecco il jsfiddle: http://jsfiddle.net/BNvke/

Il pulsante sembra ottimo da solo, ma sto cercando di farlo in modo che se aggiungo una determinata class, il padding verrà regolato e verrà visualizzata un’immagine di sfondo, tuttavia l’immagine non verrà visualizzata. Ecco il 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://sofit.miximages.com/hyperlink/2ni0ahd.png) 3px 5px no-repeat; padding-left: 35px; padding-right: 15px; }​ 

 

Without Background

With Background

Come posso ottenere quella immagine di sfondo da mostrare?

vedi http://jsfiddle.net/BNvke/1/

basta cambiare

 background-image url(http://sofit.miximages.com/hyperlink/2ni0ahd.png) 3px 5px no-repeat; 

con

 background: url(http://sofit.miximages.com/hyperlink/2ni0ahd.png) 3px 5px no-repeat; 

e sposta l’ultima regola in modo che la regola sul background-color di background-color definito per .button_blue possa essere applicata a cascata