背景位置

Question

Im trying to use an image in textbox like so (## being the image):

 ---------------------
|                  ## |
 ---------------------

I have managed to somewhat with the following:

input.loading {
    background: url(/images/loader.gif) no-repeat right;
}

However it comes out like so:

 ---------------------
|                   ##|
 ---------------------

What I need to do is add some padding to the right side but I am lost as to how I can accomplish this.

Answer 1

you could use a margin-right:10px; in your css

Answer 2

Use this instead. It will solve your problem.

background-position:10px 200px;

See this example and play around :)

Answer 3

You can change right to 98% or so. ( right is just short hand for 100% )

http://jsfiddle.net/gsUBL/

EDIT: I don't know why jsfiddle is having an issue with displaying it (in chrome at least). Clicking run shows it working.

Answer 4

I would change the positioning of no-repeat right; to a percentage that you want as right is just an easier way to to mark fully to the right or 100% . Positioning by pixels might cause unwanted horizontal scroll bars or even overlapping if their computers have a different display resolution.

Answer 5

There are multiple ways. If the input box is never going to change width then put the exact pixel amount you want in the CSS instead of "right" background: url(/images/loader.gif) no-repeat 200px; . I'd recommend rather doing exactly what you're doing background: url(/images/loader.gif) no-repeat right; and instead adding padding-right: 20px; (or however much you need) to the input box.