| 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 .