Adding background image to button using CSS
button, css, html
Solution
see http://jsfiddle.net/BNvke/1/
just change
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
with
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
and move up the last rule so the rule about `background-color` defined for `.button_blue` can be applied on cascade
Problem
I am trying to add a background image to a button (or link with the same class) which already has a background color. Here is the jsfiddle: http://jsfiddle.net/BNvke/ The button looks great by itself, but I am trying to make it so that if I add a certain class, the padding will be adjusted and a background image will be displayed, however the image does not show. Here is the 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> ``` How can I get that background image to show?