background-origin
Оновлено: 08.12.2022
background-origin
Властивість background-origin визначає область позиціонування фонового малюнка. Ця властивість не застосовується, коли значення background-attachment задано як fixed.
Коротка інформація
| Значення за замовчуванням | padding-box |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | НІ |
Синтаксис
background-origin: [padding-box | border-box | content-box]
[, [padding-box | border-box | content-box]]*
Значення
| padding-box | Фон позиціонується щодо краю елемента з урахуванням товщини кордону. |
| border-box | Фон позиціонується відносно кордону, при цьому лінія кордону може перекривати зображення. |
| content-box | Фон позиціонується відносно вмісту елемента. |
Значень може бути кілька (для кожного з множинних фонових малюнків), при цьому значення розділяються між собою комою.
Результат використання значень властивості background-origin для елемента з рамкою товщиною 20 пікселів показано на рис. 1.
Приклад
Об'єктна модель
Об'єкт.style.backgroundOrigin
Примітка
Якщо фон задано один, а значень background-origin кілька, то браузери покажуть різну поведінку. Firefox і Opera використовують перше значення, Chrome і Safari створять кілька фонових малюнків.Safari до версії 5, Android до версії 3 підтримують властивість -webkit-background-origin.
Opera до версії 10.5 підтримує властивість -o-background-origin.
Firefox до версії 4 підтримує властивість -moz-background-origin.