background-position

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

Спробуйте його в дії

Синтаксис

/* Значення – ключові слова */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* Значення <percentage> */
background-position: 25% 75%;

/* Значення <length> */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Декілька зображень */
background-position:
  0 0,
  center;

/* Значення відступів країв */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Глобальні значення */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: revert-layer;
background-position: unset;

Властивість background-position задається у вигляді одного чи більше значень <position>, розділених комами.

Значення

<position>

<position> – положення. Визначає координати X та Y, аби розташувати зображення відносно країв рамок елемента. Може визначатися за допомогою від одного до чотирьох значень. Якщо задано два значення, що не є ключовими словами, то перше з них представляє положення по горизонталі, а друге – по вертикалі. Коли задано лише одне значення, то друге значення вважається за center. Коли використовуються три або чотири значення, то значення довжини або відсотків є відступами для попередніх значень – ключових слів.

Синтаксис 1 значення: значенням може бути:

  • Значення – ключове слово center, котре центрує зображення.
  • Одне зі значень – ключових слів top, left, bottom, right. Вони задають край, на якому розташовується елемент. Тоді інша розмірність отримує 50%, тож елемент розташовується посередині заданого краю.
  • <length> або <percentage>. Такі значення задають координату X відносно лівого краю, а координата Y вважається за 50%.

Синтаксис 2 значень: одне значення задає X, а друге – Y. Кожне з них може бути:

  • Одне зі значень – ключових слів top, left, bottom, right. Якщо задано left або right, то це задає X, а інше значення – задає Y. Якщо задано top або bottom, то це задає Y, а інше значення – X.
  • <length> або <percentage>. Якщо інше значення – left або right, то це значення задає Y відносно верхнього краю. Якщо інше значення – top або bottom, то це значення задає X відносно лівого краю. Якщо обидва значення – <length> або <percentage>, то перше з них задає X, а друге – Y.
  • Зверніть увагу, що: якщо одне зі значень – top або bottom, то інше значення не може бути top або bottom. Аналогічно, якщо одне зі значень – left або right, то інше значення не може бути left або right. Це означає, що, наприклад, top top і left right – недійсні значення.
  • Порядок: при паруванні ключових слів, їх розташування в списку неважливе, адже браузер сам може їх переставити, і значення top left і left top дадуть однаковий результат. При паруванні <length> або <percentage> з ключовим словом – порядок є важливим, спершу повинно стояти значення X, а потім – Y, і значення right 20px не тотожне 20px right: перше значення – дійсне, а друге – ні. Значення left 20% і 20% bottom – є дійсними, адже значення X та Y чітко визначені, і їх порядок є правильним.
  • Усталене значення – left top, або 0% 0%.

Синтаксис 3 значень: Два значення – значення – ключові слова, а третє – відступ для попереднього значення:

  • Перше значення – одне з ключових слів top, left, bottom, right, or center. Коли тут задано left або right, то це визначає X. Коли тут задано top або bottom, то це визначає Y, а інше ключове слово – X.
  • Значення <length> або <percentage>, коли задано на другій позиції, є відступом для першого значення. Коли воно стоїть на третій позиції, воно є відступом для другого значення.
  • Єдине значення довжини або відсотків є відступом для значення – ключового слова, що стоїть перед ним. Поєднання одного ключового слова з двома значеннями <length> або <percentage> є недійсним.

Синтаксис 4 значень: Перше та третє значення – значення – ключові слова, що визначають X та Y. Друге й четверте значення – відступи для значень – ключових слів X та Y, що стоять перед ними:

  • Перше і третє значення – беруться серед ключових слів top, left, bottom, right. Коли тут задано left або right, то таке значення задає X. Коли тут задано top або bottom, то таке значення задає Y, а інше значення – ключове слово – задає X.
  • Друге й третє значення – значення <length> або <percentage>. Друге значення – відступ для першого ключового слова. Четверте значення – відступ для другого ключового слова.

Щодо відсотків

Відсотковий відступ положення даного зображення тла є відносним щодо контейнера. Значення 0% означає, що лівий (або верхній) край зображення тла стикується з відповідним лівим (або верхнім) краєм контейнера, або що позначка зображення 0% буде на позначці контейнера 0%. Значення 100% означає, що правий (або нижній) край зображення тла стикується з правим (або нижнім) краєм контейнера, або що позначка 100% зображення буде на позначці 100% контейнера. Таким чином, значення 50% горизонтально або вертикально центрує зображення тла, адже 50% зображення стоятиме на позначці 50% контейнера. Подібно до цього, background-position: 25% 75% означає, що частина зображення, котра лежить на 25% від лівого краю та за 75% від верхнього, буде розташована у тій частині контейнера, що лежить за 25% від лівого краю контейнера і за 75% від його верхнього краю.

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

(ширина контейнера - ширина зображення) * (положення x%) = (значення відступу x)
(висота контейнера - висота зображення) * (положення y%) = (значення відступу y)

Наприклад, для осі X, скажімо, що є зображення 300px завширшки, котре використовується в контейнері, котрий має 100px завширшки та значення background-size – auto:

100px - 300px = -200px (різниця між контейнером і зображенням)

Тож з відсотковими положеннями -25%, 0%, 50%, 100%, 125%, вийдуть такі значення відступів країв зображення-контейнер:

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

Тож з такими результівними значеннями для прикладів лівий край зображення має відступ від лівого краю контейнера наступного розміру:

  • + 50px (ставлячи лівий край зображення в центр контейнера 100 пікселів завширшки)
  • 0px (лівий край збігається з лівим краєм контейнера)
  • -100px (лівий край зображення на 100 пікселів лівіше контейнера; у цьому прикладі це означає, що середні 100 пікселів зображення центровані в контейнері)
  • -200px (лівий край зображення на 200 пікселів лівіше контейнера; у цьому прикладі це означає, що правий край зображення збігається з правим краєм контейнера)
  • -250px (лівий край зображення на 250 пікселів лівіше контейнера; у цьому прикладі це ставить правий край зображення 300 пікселів завширшки в центр контейнера)

Слід згадати, що коли background-size має значення, рівне розмірові контейнера за відповідною віссю, то відсоткове положення за цією віссю не діятиме, тому що "різниця контейнер-зображення" буде нулем. Доведеться робити відступи за допомогою абсолютних значень.

Формальне визначення

Початкове значення0% 0%
Успадковуєтьсяні
Обчислене значеннятак як і всі інші властивості зі скорочення:
  • background-position-x: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
  • background-position-y: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword

Формальний синтаксис

<bg-position>#

де
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]

де
<length-percentage> = <length> | <percentage>

Приклади

Розташування зображень тла

Кожен з цих прикладів використовує властивість background для створення жовтого прямокутного елемента, що містить зображення зірки. В кожному з прикладів зірка стоїть в інакшому місці. Третій приклад демонструє, як задати положення для двох різних зображень тла в одному елементі.

HTML

<div class="exampleone">Приклад один</div>
<div class="exampletwo">Приклад два</div>
<div class="examplethree">Приклад три</div>

CSS

/* Застосовується до всіх <div>ів */
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* Ці приклади використовують властивість-скорочення `background` */
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/* Декілька зображень тла: для кожного зображення вказано
   відповідну йому позицію, від першої до останньої. */
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
background-position
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Four-value syntax (support for offsets from any edge)
Chrome Full support 25
Edge Full support 12
Firefox Full support 13
Internet Explorer Full support 9
Opera Full support 10.5
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 25
Firefox for Android Full support 14
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Multiple backgrounds
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.6
Internet Explorer Full support 9
Opera Full support 10.5
Safari Full support 1.3
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0

Дивіться також