background-size

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

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

Синтаксис

background-size: <length> | <percentage> | cover | contain;

Значення

  • <length> — конкретні розміри для фону в одиницях виміру, таких як px, em, rem. Наприклад, background-size: 200px 300px; задає розмір фонового зображення як 200 пікселів по горизонталі і 300 пікселів по вертикалі.
  • <percentage> — задає розмір фону у відсотках від розмірів елемента. Наприклад, background-size: 50% 50%; зробить фон рівним половині розміру елемента по горизонталі та вертикалі.
  • cover — фонове зображення буде масштабуватися таким чином, щоб покрити весь елемент, зберігаючи пропорції. Частини зображення при цьому можуть виходити за межі елемента і обрізатися.
  • contain — фонове зображення буде масштабуватися так, щоб повністю вміститися в межах елемента, зберігаючи пропорції. Може залишати порожні місця навколо зображення, якщо пропорції елемента і зображення не співпадають.

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

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

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

  • Властивість background-size зазвичай використовується разом з background-position для досягнення точного розміщення фону в елементі.
  • Використання cover та contain особливо корисне при створенні адаптивних веб-сторінок, де фон повинен змінюватися в залежності від розміру екрану або контейнера.
  • Задання конкретних розмірів для фону (використовуючи px або %) дозволяє точно контролювати масштабування зображень.
  • Підтримується всіма сучасними браузерами.