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