Я только что попробовал это в Tryit-редакторе, который вы связали, он не работает в Chrome. Даже при использовании Javascript.

лько я могу судить, невозможно разместить фоновое изображение CSS 1em от правой границы какого-либо блока, а также невозможно разместить изображение 1em снизу.

Следующий код размещает фоновое изображение 1em слева и 2em сверху.

<div class="foo" style="background: url('bar.png') no-repeat 1em 2em">
  Some text here
</div>

Есть ли способ в CSS, чтобы указать, что фоновое изображение должно быть "это далеко от правого края", если размер поля является динамическим и предполагается, что вы не можете изменить HTML?

(Проценты не будут работать, так как коробка может изменить размер)

Если это невозможно, какое минимальное количество изменений нужно внести в HTML?

Это обходной путь, который я придумал:

<style>
div.background
{
  float: right; 
  background: url('bar.png') no-repeat top left; 
  margin-right: 1em; 
  width: 16px; 
  height: 16px;
}
</style>
<div class="foo">
  <div class="background" style="">&nbsp;</div>
  Some text here
</div>

Ответы на вопрос(1)

Ваш ответ на вопрос