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 .