css властивість background-position

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

Властивість background-position може отримувати до чотирьох значеннь.

Якщо зміщення задане одним значенням, це значення вказує горизонтальне зміщення. Браузер встановлює вертикальне позицію по центру автоматично.

Якщо двома значеннями, перше значення - горизонтальне зміщення, а друге значення - вертикальне зміщення.

Синтаксис три або чотири значення змінюється між ключовими словами та довжиною або відсотковими одиницями. Ти можеш використовувати будь-яке значення ключових слів, за винятком центру, у трьох-або чотиризначній декларації у фоновому режимі.

Коли ти вказуєш три значення, браузер інтерпретує "відсутнє" четверте як 0. Дивись 3 приклад.

Перелік деяких можливих значень:

• <відсотки> <відсотки> - перше значення визначає позицію по горизонталі, друге - по вертикалі. Наприклад, 0% 0% - верхній лівий кут. 100% 100% - правий нижній.
• <відсотки> - горизонтальна позиція картинки у відсотках від 0% до 100%. Вертикальне значення буде рівним 50% (= посередині).
• <розмір> <розмір> - вказує місце розташування (перше значення - по горизонталі і друге - по вертикалі, відповідно) з використанням прийнятих в CSS розмірних величин.
• <розмір> - горизонтальне положення тла, вказане одним з прийнятих в CSS розмірних величин. Вертикальне значення буде рівним 50% (посередині).
• left top - верхній лівий кут - те ж саме, що 0% 0% або top left.
• top - посередині, нагорі. Те ж саме, що і 50% 0%, top center, center top.
• right top - верхній правий кут. Те ж саме, що і 100% 0%, top right.
• left - зліва, посередині. Те ж саме, що і 0% 50%, left center, center left.
• center - по центру. Те ж саме, що і 50% 50%, center center.
• right - праворуч, посередині. Те ж, що і 100% 50%, right center, center right.
• left bottom - знизу ліворуч. Те ж саме, що і 0% 100%, bottom left.
• bottom - посередині, внизу. Те ж, що і 50% 100%, center bottom, bottom center.
• right bottom - правий нижній кут. Те ж саме, що і 100% 100%, bottom right.

Як ти помітив з цих прикладів, ключові слова це скорочення від відсотків, адже лаконічніше сказати top right ніж 0% 100%. Тому використовуй їх це полегшить сприйняття інформації.

Допустимо вказувати кілька зміщень для кожного тла, перераховуючи значення через кому.

Також підтримуються від'ємні значення. Вони встановлюють обернені зміщення, найчастіше при таких зміщеннях тло виходить за кордони елемента.

Отже:

• якщо дано тільки одне значення, то воно застосовується до горизонтального зміщення, при цьому вертикальне дорівнюватиме 50% (посередині), але коли застосовуються ключові слова, то їх порядок не має значення, браузер все визначить самостійно. горизонтальне зміщення може бути вказано за допомогою ключових слів - left, center, right, а вертикальне - top, center, bottom. Крім використання ключових слів, зміщення також можна задавати величини у відсотках, пікселях або інших одиницях. також ти мав, зрозуміти, що center 10% та 10% center будуть мати різний результат.* Комбінація ключових слів може бути вказана в будь-якому порядку, в той же час за комбінацією величини і ключового слова треба слідкувати, тому, що якщо першим значенням є величина (а перше значення обов'язково вказує на горизонтальне зміщення), то другим значенням не можуть бути ключові слова, такі як left та right, а от top та bottom можуть.

Приклад:

/* Правильно */

left center;

center left;

10px top

30% bottom

left 30%;

/* Неправильно */

30% left;

10px right;

Синтаксис

background-position: value; 

x% y%

Перше значення є горизонтальне положення, а друге значення це вертикальна. Верхній лівий кут 0% 0%. У нижньому правому куті на 100% 100%. Якщо вказати тільки одне значення, інше значення становитиме 50%.

xpos ypos

Перше значення є горизонтальне положення, а друге значення це вертикальна. Верхній лівий кут дорівнює 0 0. Одиниці можуть бути пікселі (0px 0px) або будь-які інші одиниці CSS. Якщо вказати тільки одне значення, інше значення становитиме 50%. Ви можете змішати % і позиції

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента (якщо відповідна властивість встановлена)

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4
• Приклад 5
• Приклад 6

.box {


  background-position: 25% 45px; 


}

Додаткові посилання