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

CSS властивість background-attachment визначає, чи буде фонове зображення прокручуватися разом зі вмістом елемента.

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

Мабуть кожен бачив “супер крутий” сайт де тло при прокручуванні залишається на місці і не рухається разом з вмістом, саме таку поведінку дозволяє задати ця властивість, дивись 3-й приклад. Якщо коротко, то background-attachment може зафіксувати тло, щоб воно залишатися нерухомим, або зробити так, щоб тло рухалося разом з документом.

Існує різниця між головним вікном браузера та локальним вікном (ви можете побачити це в демо нижче).

scroll є значенням без задання. Тло у цьому випадку прокручується разом з головним вікном браузера, але залишається фіксованим всередині локлаьного перегляду

local робить так, щоб тло прокручувалося тільки всередині свого локального вікна, він фіксується відносно вмісту елементу, й при прокручуванні цілої сторінки не буде рухатися.

fixed же фіксує тло, незалежно від типу вікна в якому він розташований.

Дозволяється вказувати декілька значень для ряду фонових зображень, перераховуючи їх через кому. Кожне нове значення застосовується до для кожного з множинних фонових малюнків в тому порядку, який визначений у властивості background-image. Наочно можеш подивитися в другому прикладі

Синтаксис

background-attachment: scroll|fixed|local|initial|inherit|unset;

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


scroll: Фонове зображення фіксується по відношенню до самого елементу і не прокручується разом з його вмістом, тобто якщо елемент має прокрутку, то зображення залишається на місці. Якщо сторінка має прокрутку, то фонове зображення прокручується разом з елементом. Без задання.

fixed: Зображення фіксується по відношенню до вікна браузера, тому тло залишається не рухомим при прокручуванні вмісту сторінки і / або вмісту елемента.

local: Фонове зображення фіксується по відношенню до вмісту елементу, тобто якщо елемент має прокрутку, фонове зображення прокручується разом з вмістом елементу.

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

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

unset: Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.

Значення без задання:	scroll
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.backgroundAttachment="fixed"