background-image

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

Інтерактивний приклад використання

Синтаксис

background-image: url(<image-url>) | linear-gradient(<direction>, <color1>, <color2>);

Значення

  • url(<image-url>) — вказує URL зображення, яке буде використано як фон для елемента. Можна вказувати одне або декілька зображень через коми, і вони будуть накладатися один на один. Наприклад, background-image: url('image1.png'), url('image1.png')
  • linear-gradient(<direction>, <color1>, <color2>); — визначає лінійний градієнт, де <direction> вказує напрямок (наприклад, to right, to bottom), а <color-stop> визначає кольори градієнта.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • background-image дозволяє використовувати не тільки традиційні зображення, але й CSS-градієнти, що надає гнучкість при створенні фону.
  • Властивість підтримує кілька фонових зображень, і кожне зображення можна налаштовувати окремо.
  • Щоб уникнути проблем із відображенням зображень, важливо вказувати правильний шлях до файлів або використовувати відносні шляхи, що працюватимуть незалежно від структури сайту.
  • Властивість background-image підтримує прозорість за допомогою формату зображення PNG або WEBP, а також за допомогою градієнтів, що може бути корисно для створення складних ефектів.
  • Властивість background-image зазвичай використовується разом з іншими властивостями фону, такими як background-position, background-size, background-repeat, для повного контролю над фоном.
  • Властивість підтримується всіма сучасними браузерами.