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? — Justinas
– Justinas, Commented Nov 24, 2014 at 10:19
background-position: right 30px center; Worked for me :) @Justinas Thanks for routing me to the proper stackoverflow thread. — Ismail Vittal
– Ismail Vittal, Commented Nov 24, 2014 at 10:24

Ismail Vittal · Accepted Answer · 2014-11-24 19:10:07Z

1

This one worked for me and solved my issue:

 background-position:right 10px center;

answered Nov 24, 2014 at 19:10

Ismail Vittal

1,1039 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pavel · Accepted Answer · 2014-11-24 10:24:25Z

0

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.

answered Nov 24, 2014 at 10:24

pavel

27.3k11 gold badges47 silver badges63 bronze badges

Comments

Rasel · Accepted Answer · 2014-11-24 10:28:18Z

0

use background-position property like this-

background-position: 95% 30%;

demo

edited Nov 24, 2014 at 10:28

answered Nov 24, 2014 at 10:23

Rasel

5,7643 gold badges32 silver badges40 bronze badges

6 Comments

Justinas Over a year ago

What if button has different width and height?

Bharadwaj Over a year ago

setting % value will work in all case. Ex, background-position: 95%;

Justinas Over a year ago

@Bharadwaj You are wrong. If width = 100px, than 10% is equal to 10px, if you have 10px width, than 10% is only 1px!

Bharadwaj Over a year ago

@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?

Justinas Over a year ago

@Bharadwaj calc(100% - 10px)

|

Collectives™ on Stack Overflow

Set the button image position using CSS

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related