фон положение

Question

Я пытаюсь использовать изображение в текстовом поле следующим образом (## - изображение):

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

Мне удалось кое-что со следующим:

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

Однако получается так:

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

Что мне нужно сделать, так это добавить несколько отступов к правой стороне, но я не знаю, как мне это сделать.

Answer 1

вы можете использовать margin-right:10px; в вашем CSS

Answer 2

Есть несколько способов. Если поле ввода никогда не изменит ширину, поместите точное количество пикселей в CSS вместо «правильного» * ​​1001 *. Я бы рекомендовал делать именно то, что вы делаете background: url(/images/loader.gif) no-repeat right; и вместо этого добавлять padding-right: 20px; (или сколько вам нужно) в поле ввода.

Answer 3

Я бы изменил положение no-repeat right; на процент, который вы хотите, так как right - это просто более простой способ пометить полностью вправо или 100%. Позиционирование по пикселям может привести к нежелательным горизонтальным полосам прокрутки или даже к перекрытию, если их компьютеры имеют другое разрешение экрана.

Answer 4

Вы можете изменить right на 98% или около того. (right это просто короткая рука для 100%)

http://jsfiddle.net/gsUBL/

EDIT: Я не знаю, почему у jsfiddle есть проблема с отображением (по крайней мере, в chrome). Нажатие запуска показывает, что оно работает.

Answer 5

Используйте это вместо. Это решит вашу проблему.

background-position:10px 200px;

Посмотрите этот пример и поиграйте:)