Background-image є однією з властивостей CSS, яка дозволяє встановити зображення як фон для елемента веб-сторінки. Це дозволяє прикрашати і підкреслювати важливі елементи або створювати особливу стилістику для різних частин сайту.
Для використання властивості background-image потрібно вказати шлях до файлу зображення. Це може бути відносний або абсолютний шлях до файлу на веб-сервері або URL-адресу зображення в Інтернеті. Крім того, можна вказати кілька зображень і встановити їх порядок відображення.
При встановленні background-image можна також налаштувати його розташування, повторюваність та масштабування. За допомогою властивостей background-position, background-repeat і background-size можна змінити положення та масштабування зображення, а також задати, чи воно повторюватиметься чи охоплюватиме всю доступну область елемента.
| Властивість | Опис |
|---|---|
| background-image | Визначає фонове зображення елемента |
| background-repeat | Визначає, як повторюватиметься фонове зображення – по горизонталі, по вертикалі чи не повторюватиметься |
| background-position | Визначає позицію фонового зображення щодо елемента |
| background-size | Визначає розмір фонового зображення |
| background-attachment | Визначає, як фонове зображення поводиться при прокручуванні – залишається на місці або прокручується разом із вмістом |
Як працює властивість background-image?
Властивість background-image дозволяє задати зображення як фон елемента. Це може бути будь-який тип зображення, включаючи jpeg, png, gif, svg та інші.Значення цієї властивості вказується у форматі URL, який посилається на зображення. Також можна використовувати кілька зображень для фону.
Коли використати background-image?
background-image дозволяє додати зображення як фон для вибраного елемента. Фонове зображення може бути будь-якого типу і повторюватися або масштабуватись залежно від налаштувань.
Чим відрізняється від background-image?
background-color — встановлення фонового кольору background-image — встановлення фонового зображення або градієнта