Submit button background-image

I'm having trouble setting the background image of a submit button. This is my code:



I've also tried putting the css in my external css file in the .submit tag... didn't work. I know the path to the image is correct because the following works:


What gives? Thanks

Try using the Button element instead, it allows more styling.
http://www.w3.org/TR/html401/interact/forms.html#h-17.5

The problem with your style code might be the quotes inside the brackets. I don't think you should have them. So change

to

******************

Akh's suggestion of using button is good. But if you'd like to stick with input, make sure your css looks something like this:

UPDATE: sorry, this is wrong. See next posts below...

******************

I must admit that I have not used a background image on a submit input, so I am hypothesizing a little. Let me know if you try this and it works!

@Arem

The single quotes are optional. It's best to leave them out because IE5/Mac has trouble with them.

Your selector means an <input> element that is a descendant of an element that belongs to the "submit" class. Don't you mean "input.submit" -- an <input> element that belongs to the "submit" class?

Yes, thanks Kravvitz, my code is wrong. My post was originally much longer, and suggested placing the <input> inside a div with .submit class. I cut it down for simplicity's sake, and did not check carefully enough what I had left.

So I guess the css should read:



BTW Kravvitz, what's the best way to add an image to a <button>? Is it easy enough to add a background-image to a <button>, or is it better to put the image in the html? As I understand it, the button has this format: <button>Text</button>. To add an image in the html, do you do something like this?



I have left the middle bit blank (i.e. between <button> and </button>, with no text. Is this kosher?