| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||||
| 9.0 + | 4.0 + | 10.1 + | 10.5 + | 3.1 + | 5.0 + | 3.6 + | 4.0 + | 2.1 + | 3.0 + | 1.0 + |
Коротка інформація
| Значення за умовчанням | padding-box |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Відсотковий запис | незастосовні |
| Посилання на специфікацію | http://www.w3.org/TR/css3-background/#background-origin |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Властивість background-origin визначає область позиціонування фонового малюнка. Це властивість не застосовується, коли значення background-attachment задано як fixed .
Синтаксис
background-origin: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]] *
Значення
- padding-box
- Фон позиціонується щодо краю елемента з урахуванням товщини межі.
- border-box
- Фон позиціонується щодо межі, при цьому лінія межі може перекривати зображення.
- content-box
- Фон позиціонується щодо вмісту елемента.
Значний може бути кілька (для кожного з множинних фонових малюнків), при цьому значення поділяються між собою комою.
Результат використання значень властивості background-origin для елемента з рамкою олщіной 20 пікселів показаний на рис. 1.
 |  |  |
| padding-box | border-box | content-box |
Рис. 1. Результат застосування різних значень
Приклад
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
background-origin </title>
<style>
.example {border: 20px solid #fc0; padding: 20px; height: 200px; background: url (images /figure.jpg) no-repeat; background-origin: content-box;} </style>
</head>
<body>
<div class="example">
... </div>
</body>
</html>
Браузери
Якщо фон заданий один, а значень background-origin кілька, то браузери покажуть різну поведінку. Firefox і Opera використовують перше значення, Chrome і Safari створять кілька фонових малюнків.
Safari до версії 5.0, Android до версії 3.0 підтримують нестандартне властивість - webkit-background-origin .
Opera до версії 10.1 підтримує нестандартне властивість -o-background-origin .
Firefox до версії 4.0 підтримує нестандартне властивість - moz-background-origin .