Фонове Зображення

Властивість background-image дозволяє нам додати зображення в якості фону HTML-елемента. Базовий синтаксис дуже простий:

css
background-image: url("image-url.jpg");

В якості значення властивості background-image ми використовуємо url(), а всередині цих дужок вказуємо url зображення.

background-repeat

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

css
background-repeat: repeat | repeat-x | repeat-y | no-repeat;

background-position

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

css
background-position: x y

background-size

Параметр background-size визначає розмір фонового зображення елемента. Його можна використовувати для масштабування зображення відповідно до розміру елемента або для встановлення певного розміру фонового зображення.

css
background-size: auto | cover | contain | value in px/em/rem;

• auto - значення за замовчуванням, яке встановлює фонове зображення у початковий розмір.

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

• contain - масштабує фонове зображення так, щоб воно повністю покривало елемент зі збереженням його співвідношення сторін. Це може призвести до того, що навколо зображення будуть помітні порожні місця, якщо співвідношення сторін елемента та зображення відрізняється.

• value - задає ширину та висоту фонового зображення.

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