Позиционирование фона от нижнего правого угла элемента
- Опубликовано:
При вёрстке шаблонов сайтов нередко возникает необходимость позиционировать фоновое изображение с отступом от правого или нижнего края 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
поддерживается текущими стабильными версиями всех распространённых браузеров.