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
, orcenter
. Коли тут задано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% |
---|---|
Успадковується | ні |
Обчислене значення | так як і всі інші властивості зі скорочення:
|
Формальний синтаксис
<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="example-one">Приклад один</div>
<div class="example-two">Приклад два</div>
<div class="example-three">Приклад три</div>
CSS
/* Застосовується до всіх <div>ів */
div {
background-color: #ffee99;
background-repeat: no-repeat;
width: 300px;
height: 80px;
margin-bottom: 12px;
}
/* Ці приклади використовують властивість-скорочення `background` */
.example-one {
background: url("star-transparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.example-two {
background: url("star-transparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}
/* Декілька зображень тла: для кожного зображення вказано
відповідну йому позицію, від першої до останньої. */
.example-three {
background-image: url("star-transparent.gif"), url("cat-front.png");
background-position:
0px 0px,
right 3em bottom 2em;
}
Результат
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |