Позиционирование фона с отступом от правого нижнего края элемента
- Опубликовано:
При вёрстке шаблонов сайтов нередко возникает необходимость позиционировать фоновое изображение с отступом от правого или нижнего края HTML-элемента. Долгое время для этого приходилось встраивать пустое пространство соответствующего размера непосредственно в изображение, поскольку в CSS такой возможности не было. Это приводило к снижению гибкости (для изменения отступа необходимо пересохранять изображение) и увеличивало размер файла и потребление памяти в браузере.
Ситуация меняется благодаря модулю CSS3 «Backgrounds and Borders», относительно недавно перешедшему в статус Candidate Recommendation. Предусмотренный в нём обновлённый синтаксис CSS-свойства background-position позволяет задать произвольные отступы от правого и/или нижнего краёв элемента:
background-position: bottom 10px right 20px
В приведённом примере изображение будет привязано к правому нижнему углу элемента и при этом будет отстоять на 10 и 20 точек от нижнего и правого краёв элемента, соответственно.
В настоящее время CSS3-синтаксис background-position уже поддерживается в Opera 11+ и IE9+. В Firefox возможность станет доступной начиная с версии 13, выход которой ожидается в начале июня. Для WebKit (Chrome, Safari) существует не принятый пока патч.