Інші властивості фону в CSS

Вивчаємо додаткові властивості для керування фоном елемента: background-position, background-size, background-attachment, background-clip, background-origin та background.

Інші властивості фону в CSS

CSS має багато властивостей для керування фоновими зображеннями та кольорами. Вони дозволяють змінювати положення, розмір, область відображення та поведінку фону.

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

body {
  background-image: url("/html/bg.png");
  background-position: center;
}

body {
  background-size: cover;
}

body {
  background-attachment: fixed;
}

❗ Важливо:

Властивість background є скороченим записом і дозволяє задати кілька параметрів фону одним рядком.

body {
  background: url("/html/bg.png") center / cover no-repeat;
}

📌 Завдання:

№1. Вивчіть властивості background-position, background-size та background-attachment.
№2. Потренуйтеся змінювати положення та розмір фонового зображення.
№3. Перевірте роботу background-clip та background-origin.
№4. Спробуйте замінити окремі властивості скороченим записом background.

💡 Показати підказку

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