how to set background image in submit button?

Question

how to set background image in submit button?

I have to use a image in place of regular submit button? which way would be best in xhtml/css?

Button should look same in all main browsers including IE6,IE7

Answer 1

The way I usually do it, is with the following css:

div#submitForm input {   background: url("../images/buttonbg.png") no-repeat scroll 0 0 transparent;   color: #000000;   cursor: pointer;   font-weight: bold;   height: 20px;   padding-bottom: 2px;   width: 75px; } 

and the markup:

<div id="submitForm">     <input type="submit" value="Submit" name="submit"> </div> 

If things look different in the various browsers I implore you to use a reset style sheet which sets all margins, padding and maybe even borders to zero.

Answer 2

.button {     border: none;     background: url('/forms/up.png') no-repeat top left;     padding: 2px 8px; }