how to style button with background image

Question

I'm having trouble getting rid of the gray border in my button that has a background image. I tried to put together a public example on jsfiddle and I can't even get a proper example to work as the image sprite also fails to show up:

http://jsfiddle.net/3vPpt

So my two questions are:

1) Why isn't the background image showing up in my jsfiddle

2) And after we get the sprite to show up, how do I get rid of the gray border that is the original button? I only want the sprite to show up.

Solution

Try this.

It looks like you were applying the styles to the image element, not to the button. I doubt that you can apply a background-image style to an image element, even if it's a blank image. I think this may be because an image element is an inline element.

I also added border: none; to the button, which gets rid of the button border styling.

Note that you still may encounter weird padding/margin issues yet, but that can be for another question. Firefox, at least, like to apply an extra few pixels of padding in button elements even after you remove their border.