css властивість background-origin

Властивість background-origin було додано в CSS3 і вона визначає область позиціонування фонового зображення (точку, з якої почнеться тло). Тло може починатися від внутрішнього краю грані елементу, від зовнішньої краю грані або тільки в зоні контенту.

На жаль цей малюнок не може наочно показати поведінку, котру задає ця властивість, але ти можеш подивитися 1 приклад.

background-origin схоже на background-clip, але перша властивість просто змінює розмір фону, а друга обрізає його.

Цю властивість можна використовувати у скороченому записі background, наприклад:

background: url("background.png") 40% / 10em lightblue round border-box;

Якщо background-origin не прописана спеціально, вона отримує значення без задання: padding-box.

Для потрібного ефекту потрібно також використовувати background-repeat: no-repeat;, в протилежному випадку, фонове зображення буде повторюватися й за межу вмісту.

Ця властивість не застосовується, коли значення background-attachment задано як fixed.

Значень може бути кілька (для кожного з множинних фонових малюнків), при цьому значення поділяються між собою комою.

правити

Порада

Якщо фон заданий один, а значень background-origin кілька, то браузери покажуть різну поведінку. Firefox і Opera використовують перше значення, Chrome і Safari створять кілька фонових малюнків.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

background-origin: padding-box|border-box|content-box|initial|inherit;

Властивість background-origin може отримувати 5 значень:

padding-box

Фон позиціонується щодо краю елемента з урахуванням товщини кордону

автор: Svitlana

правити

border-box

Фон позиціонується відносно кордону, при цьому лінія кордону може перекривати зображення

автор: Svitlana

правити

content-box

Фон позиціонується відносно вмісту елемента

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	4	3	10.5	12	9

Підтримка: мобільні переглядачі

Переглядач
	4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">padding-box (типово)</div>
<div class="box content">content-box</div>

.box {
    display: inline-block;
    width: 150px;
    padding: 16px;
    margin-right: 8px;
    border: 4px dashed #999;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%230172ad'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.content {
    background-origin: content-box;
}