CODEWITHSUNDEEP
css
Ismail Vittal
Ismail Vittal

Reputation: 1103

Set the button image position using CSS

I am trying to move the background image [arrow] to the extreme right of the button, I need approx 10px or 15px padding from the right side of the input button like this: jsfiddle.net/44f61m5e/

HTML:

<input type="button" value="Add a new row" class="button_add" />

CSS:

input.button_add {
    height: 32px;
    padding-right: 36px;
    border: 1px solid #000;
    background: #ff9900 url(http://placehold.it/16x16) no-repeat right;   cursor: pointer;
}

Demo : http://jsfiddle.net/Tk68M/150/

Can anyone suggest the better way without adding an image tag like this: jsfiddle.net/44f61m5e/

Thanks in advance.

Upvotes: 2

Views: 3757

Answers (3)

Ismail Vittal
Ismail Vittal

Reputation: 1103

This one worked for me and solved my issue:

 background-position:right 10px center;

Upvotes: 1

Rasel
Rasel

Reputation: 5734

use background-position property like this-

background-position: 95% 30%;

demo

Upvotes: 0

pavel
pavel

Reputation: 27082

It´s not possible use the background like this, you can´t set "15px from the right side".

Only way is to use another element as in your second fiddle. Or have the background image wider, the image has to include the arrow and right whitespace too. Than you can use background-position: right.

Of course, when you want to move the arrow a few pixels left/right, you need to edit this image. Better is to use button and the second element for the arrow.

Upvotes: 0

Related Questions