CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
2.1 | 6.0 + | 8.0 + | 1.0 + | 3.5 + | 1.0 + | 1.0 + | 2.1 + | 1.0 + |
3 | 9.0 + | 1.0 + | 10.5 + | 1.3 + | 3.6 + | 2.1 + | 1.0 + |
Коротка інформація
Значення за умовчанням | 0% 0% |
---|---|
Успадковується | Ні |
Застосовується | До блокових елементів |
Посилання на специфікацію |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Задає початкове положення фонового зображення, встановленого за допомогою властивості background-image . В CSS3 допустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому.
Синтаксис
CSS2.1 | background-position: [left | center | right | <відсотки> | <значення> ] || [Top | center | bottom | <відсотки> | <значення> ] | inherit |
CSS3 | background -position: <позиція> [, <позиція> ] * |
Тут:
<позиція> =[Left | center | right | <відсотки> | <значення> ] || [Top | center | bottom | <відсотки> | <значення> ] | inherit.
Значення
У властивості background-position два значення, положення по горизонталі (може бути — left, center, right ) і вертикалі (може бути — top, center, bottom ). Крім використання ключових слів положення також можна задавати у відсотках, пікселах або інших одиницях. Якщо застосовуються ключові слова, то порядок їх прямування не має значення, при процентній записи спочатку задається положення малюнка по горизонталі, а потім, через пробіл, положення по вертикалі. Відношення між використовуваними ключовими словами і процентної записом наступне.
- top left=left top=0% 0% (в лівому верхньому кутку)
- top=top center=center top=50% 0% (по центру вгорі)
- right top=top right=100% 0% (у правому верхньому куті)
- left=left center=center left=0% 50% (по лівому краю і по центру)
- center=center center=50% 50% (по центру)
- right=right center=center right=100% 50% ( по правому краю і по центру)
- bottom left=left bottom=0% 100% (в лівому нижньому кутку)
- bottom=bottom center=center bottom=50% 100% ( по центру внизу)
- bottom right=right bottom=100% 100% (в правому нижньому кутку)
в дужках вказано, де распол агается фоновий малюнок щодо контейнера.
При inherit значення успадковується у батька елемента.
Приклад 1
XHTML 1.0 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html PUBLIC" -//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text /html; charset=utf-8"/> <title> background-position </title> <style type="text /css"> html {height: 100%; /* Висота сторінки */ } body {background-image: url (images /mybg.png); /* Шлях до фонового малюнку */ background-position: right bottom; /* Положення фону */ background-repeat: no-repeat; /* Скасовуємо повторення фону */ } </style> </head> <body> <p> ... </p> </body> </html>
Приклад 2
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> background-position </title> <style> body {background-image: url (images /pattern-left.png), url (images /pattern-right.png); background-repeat: repeat-y, repeat-y; background-position: left, right; } </style> </head> <body> <div style="height: 2000px"> </div> </body> </html>
Об'єктна модель
[window.] Document.getElementById (" elementID ").style.backgroundPosition
Браузери
Internet Explorer до версії 7.0 включно не підтримує значення inherit .