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


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

Властивість `background-origin`

На жаль цей малюнок не може наочно показати поведінку, котру задає ця властивість, але ти можеш подивитися 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 створять кілька фонових малюнків.

Синтаксис

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

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

padding-box

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

border-box

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

content-box

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

initial

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

inherit

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

Значення без задання: padding-box
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.backgroundOrigin="content-box"

Переглядачі

Переглядач
background-origin

4.0

9.0

4.0

3.0

10.5

Переглядач
background-origin

3.0

4.0

5.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація роботи властивості​

Демонстрація роботи властивості

Демонстрація роботи властивості​

Демонстрація роботи властивості

Синтаксис властивості

.box {


  background-origin: padding-box;


}	

Додаткові посилання