Geek Answers Handbook

Adding a background image to a button using CSS

I am trying to add a background image to a button (or a link with the same class) that already has a background color.

Here is jsfiddle: http://jsfiddle.net/BNvke/

The button looks great on its own, but I'm trying to make sure that if I add a certain class, the indentation will be adjusted and the background image will be displayed, but the image will not be displayed. 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 this background image?

+4
source share
1 answer

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

just change

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

from

 background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;

and go to the last rule so that the background-color rule defined for .button_blue can be applied to the cascade

+8
source

More articles:


All Articles