Зміст курсу
Основи CSS
Основи CSS
Фонове Зображення
Властивість background-image
дозволяє нам додати зображення в якості фону HTML-елемента. Базовий синтаксис дуже простий:
В якості значення властивості background-image
ми використовуємо url()
, а всередині цих дужок вказуємо url зображення.
index.html
index.css
background-repeat
Визначає, чи буде зображення повторюватися по горизонталі, вертикалі, по обидва боки або не буде повторюватися взагалі.
index.html
index.css
background-position
Властивість background-position
використовується для встановлення початкової позиції фонового зображення у фоновій області елемента. Ця властивість дозволяє нам вказати, де має бути розміщене фонове зображення і як воно має бути розташоване відносно елемента. Нам потрібно задати позицію по осях x
і y
index.html
index.css
background-size
Параметр background-size
визначає розмір фонового зображення елемента. Його можна використовувати для масштабування зображення відповідно до розміру елемента або для встановлення певного розміру фонового зображення.
auto
- значення за замовчуванням, яке встановлює фонове зображення у початковий розмір.cover
- масштабує фонове зображення так, щоб воно повністю покривало елемент зі збереженням його співвідношення сторін. Це може призвести до обрізання деяких частин зображення, якщо співвідношення сторін елемента та зображення відрізняється.contain
- масштабує фонове зображення так, щоб воно повністю покривало елемент зі збереженням його співвідношення сторін. Це може призвести до того, що навколо зображення будуть помітні порожні місця, якщо співвідношення сторін елемента та зображення відрізняється.value
- задає ширину та висоту фонового зображення.
У цьому прикладі ми використаємо більшу картинку, ніж нам потрібно, оскільки хочемо розглянути різницю у поведінці кожного значення для властивості background-size
.
index.html
index.css
1. Що робить властивість background-image?
2. Що робить властивість background-repeat?
3. Яка властивість визначає положення фонового зображення елемента?
Дякуємо за ваш відгук!