Основна інформація
Свойство 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
- Фон позиціонується відносно вмісту елемента.
Значень може бути кілька (для кожного з множинних фонових малюнків), при цьому значення розділяються комою.
Приклад
HTML5 CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-origin</title>
<style>
.приклад {
border: 20px solid #fc0;
padding: 20px;
height: 200px;
background: url(images/figure.jpg) no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<div class="приклад">...</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.