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

Question

Hi,

I'm using this css, but it puts an image in the center. Any way to left or right align an icon using an input type="button" html button, so that the text and the image fit on the button nicely?

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

Answer 1

Use this:

background-position: left/right/center; /*Choose one of the three*/

Answer 2

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.

Answer 3

This should do do what you want.

<input type="button" name="btnAdd" value="Add Row" title="Add row" class="button_add" />

input.button_add {
    background-image: url('/images/buttons/add.png'); /* 16x16 px */
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    height: 16px;
    padding-left: 16px;
    vertical-align: middle;
}