CSS положение фонового изображения динамического

Я работал в веб-приложение (HTML/CSS), и я спрашивал себя, если это возможно с CSS получить то, что я просил в названии.CSS положение фонового изображения динамического

У меня есть этот HTML:

<input type="text" class="custom-bg">

И это CSS:

.custom-bg { 
    background: url(icons.png) right -4579px no-repeat; 
    background-size: 39px 39px; //Size of the icon 
}

Мой вход не всегда одинаковый размер, он может измениться при изменении размеров браузера.
Я хочу поставить эту иконку (это стрелка вниз) в правом верхнем углу, вот почему у меня есть right в background.

Я хочу что-то вроде положения: правый 5% вместо фиксированного положения или значения (числа).

Возможно ли? (Я имею в виду css-way, no js). Это большой webapp, и некоторые классы я не могу трогать.

Благодаря

источник

2016-05-05 jBaumann

Вы пробовали? Вы можете записать относительные и абсолютные значения в 'background-position'. Как '5% 20px' –

Да, я сделал, но не работал. Вот почему я хотел подтвердить. Как я уже сказал, это очень большой сайт, и в нем много занятий, может быть, в этом и проблема. Я собираюсь попробовать еще раз – jBaumann

Что-то подсказывает мне, что, может быть, ваша проблема связана с тем, как работает позиционное позиционирование на основе процентов. Объяснение в этом ответе могло бы помочь вам - http://stackoverflow.com/questions/31456487/multiple-background-image-position?lq=1 – Harry

Baumann,

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

.custom-bg { 
    background: url(icons.png) no-repeat 95% 0px; 
    /*background-size: 39px 39px; //Size of the icon*/ 
}

Пока ваш значок размера правильно в файле, вам не нужно будет фоновый размер, а 95% означает, что значок будет помещен в дальнее справа от поля ввода, а 0px - для вашего верхнего и нижнего интервалов. Вы можете отрегулировать этот процент соответственно.

источник

2016-05-05 16:10:11

Думаю, мне нужен «размер фона», поскольку это не один значок, это спрайт-образ 50px x 10000px (ширина/высота) – jBaumann

Я вижу. Это еще одна проблема, с которой я столкнулся. Для полей ввода мне пришлось создавать отдельные файлы изображений. Мне также нравится использовать спрайты для CSS-изображений, таким образом, есть только один необходимый образ, который нужно загрузить, а затем ссылаться в CSS. Не для полей ввода: / –

CSS положение фонового изображения динамического

ответ

Смежные вопросы