Set the button image position using CSS

Question

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.

possible duplicate of [Position a css background image x pixels from the right?](http://stackoverflow.com/questions/3197250/position-a-css-background-image-x-pixels-from-the-right) — Justinas, Nov 24 '14 at 10:19
background-position: right 30px center; Worked for me :) @Justinas Thanks for routing me to the proper stackoverflow thread. — Ismail Vittal, Nov 24 '14 at 10:24

score 1 · Accepted Answer · answered Nov 24 '14 at 19:10

1

This one worked for me and solved my issue:

 background-position:right 10px center;

answered Nov 24 '14 at 19:10

Ismail Vittal

1,077
9
12

Rasel · Answer 2 · 2014-11-24T10:28:18.867

0

use background-position property like this-

background-position: 95% 30%;

demo

edited Nov 24 '14 at 10:28

answered Nov 24 '14 at 10:23

Rasel

5,488
3
30
39

1

What if button has different width and height? – Justinas Nov 24 '14 at 10:25
setting `%` value will work in all case. Ex, `background-position: 95%;` – Bharadwaj Nov 24 '14 at 10:27
@Bharadwaj You are wrong. If width = 100px, than 10% is equal to 10px, if you have 10px width, than 10% is only 1px! – Justinas Nov 24 '14 at 11:54
@Justinas The previous answer (before edit) was correct with reference to the question asked. And as you mentioned different width and height setting `%` is the solution to it. So if you say it is wrong, then what is correct approach? – Bharadwaj Nov 24 '14 at 12:04
@Bharadwaj `calc(100% - 10px)` – Justinas Nov 24 '14 at 12:22
@Justinas As you said in previous comment, what if the width is only `10px`? ;) – Bharadwaj Nov 24 '14 at 12:47

score 0 · Answer 3 · answered Nov 24 '14 at 10:24

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.

Set the button image position using CSS

3 Answers3