Позиционирование фона от нижнего правого угла элемента

При вёрстке шаблонов сайтов нередко возникает необходимость позиционировать фоновое изображение с отступом от правого или нижнего края HTML-элемента. Долгое время для этого приходилось встраивать пустое пространство соответствующего размера непосредственно в изображение, поскольку в CSS такой возможности не было. Это приводило к снижению гибкости (для изменения отступа необходимо пересохранять изображение) и увеличивало размер файла и потребление памяти в браузере.

Ситуация меняется благодаря модулю CSS3 «Backgrounds and Borders», относительно недавно перешедшему в статус Candidate Recommendation. Предусмотренный в нём обновлённый синтаксис CSS-свойства background-position позволяет задать произвольные отступы от нижнего и/или правого краёв элемента:

background-position: bottom 10px right 20px;

В приведённом примере изображение будет привязано к правому нижнему углу элемента и при этом будет отстоять на 10 и 20 точек от нижнего и правого краёв элемента, соответственно.

Формальное описание нового синтаксиса в спецификации:

Если указаны 3 или 4 значения, то каждое числовое значение соответствует отступу и должно следовать после ключевого слова, определяющего, отступ от какой из сторон элемента задаётся. Если указаны 3 значения, то отсутствующее значение отступа принимается равным нулю.

В настоящее время CSS3-синтаксис background-position уже поддерживается в Opera 11+ и IE9+. В Firefox возможность станет доступной начиная с версии 13, выход которой ожидается в начале июня. Для WebKit (Chrome, Safari) существует не принятый пока патч.

Обновлено: по состоянию на май 2013 года, CSS3-синтаксис background-position поддерживается текущими стабильными версиями всех распространённых браузеров.