- Головна
- Блог
- Позиціонування фону від нижнього правого кута елемента
При верстці шаблонів сайтів нерідко виникає необхідність позиціонувати фонове зображення з відступом від правого або нижнього краю HTML-елемента. Довгий час для цього доводилося вбудовувати порожній простір відповідного розміру безпосередньо в зображення, оскільки в CSS такої можливості не було. Це призводило до зниження гнучкості (для зміни відступу необхідно пересохранять зображення) і збільшувало розмір файлу і споживання пам'яті в браузері.
Ситуація змінюється завдяки модулю CSS3 «Backgrounds and Borders», відносно недавно перейшов в статус Candidate Recommendation. Передбачений в ньому оновлений синтаксис CSS-властивості background-position дозволяє задати довільні відступи від нижнього і / або правого країв елемента:
background-position: bottom 10px right 20px;
У наведеному прикладі зображення буде прив'язане до правого нижнього кута елемента і при цьому буде відстояти на 10 і 20 точок від нижнього і правого країв елемента, відповідно.
Формальний опис нового синтаксису в специфікації:
Якщо вказані 3 або 4 значення, то кожне числове значення відповідає відступу і має слідувати після ключового слова, що визначає, відступ від якої зі сторін елемента задається. Якщо вказані 3 значення, то відсутнє значення відступу приймається рівним нулю.
Треба ж, половину Інтернету "перегугліл", а знайшов тільки тут. Навіть в популярних і регулярно оновлюються онлайн-довідниках не виявлено, а статейка то давня вже.
Дякую за інфу.
Thanks for this I really needed this it works great as a replacement for a Jquery background-position issue I was having trying to animate this property.
This still allows me to animate the container and by setting the position off the bottom it stays in the position I need it to.
Wow! It # 's cool! Thank you so much!
Платон, якщо відступ від нижнього краю (значення після ключового слова bottom) не потрібен, його слід просто обнулити (або не ставити зовсім) і задати потрібне значення тільки для відступу праворуч (значення після right):
background-position: bottom right 10px;