background-position

CSS-властивість background-position використовується для визначення позиції фонового зображення в межах елемента. Вона дозволяє налаштовувати, де саме повинно знаходитися фонове зображення, чи буде воно вирівняне по центру, в лівому верхньому куті або в іншому місці.

Інтерактивний приклад використання

Синтаксис

background-position: <horizontal-position> <vertical-position>;

Значення

  • <horizontal-position> — задає горизонтальну позицію фону. Це може бути:
    • left, center, right — відповідно вирівнює фон по лівому, центру або правому краю елемента.
    • <length> — конкретне значення в пікселях або інших одиницях виміру (наприклад, 100px, 5em).
    • <percentage> — позиція фону в відсотках від ширини елемента (наприклад, 50% для центру).
  • <vertical-position> — задає вертикальну позицію фону. Це може бути:
    • top, center, bottom — відповідно вирівнює фон по верхньому, середньому або нижньому краю елемента.
    • <length> — конкретне значення в пікселях або інших одиницях виміру (наприклад, 100px, 5em).
    • <percentage> — позиція фону в відсотках від висоти елемента (наприклад, 50% для центру).
  • Якщо вказано лише одне значення, друге значення автоматично вважається center.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість background-position корисна для створення цікавих ефектів, таких як паралакс-скролінг або коли фон не повністю покриває елемент, і потрібно його точне розташування.
  • Користування відносними одиницями виміру (наприклад, відсотки) дозволяє зробити дизайн більш адаптивним.
  • background-position можна використовувати разом з властивістю background-size для досягнення бажаного ефекту.