HTML / CSS How to add image icon to input type="button"?

Question

I'm using the below CSS, but it puts an image in the center of the button. Any way to left or right align an icon using <input type="button">, so that the text and the image fit and align nicely?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

Answer 1

If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.