Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Фонове Зображення | Декоративні Ефекти
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

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

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

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

html

index

css

index

js

index

copy

background-repeat

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

html

index

css

index

js

index

copy

background-position

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

html

index

css

index

js

index

copy

background-size

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

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

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

html

index

css

index

js

index

copy
1. Що робить властивість background-image?
2. Що робить властивість background-repeat?
3. Яка властивість визначає положення фонового зображення елемента?
Що робить властивість background-image?

Що робить властивість background-image?

Виберіть правильну відповідь

Що робить властивість background-repeat?

Що робить властивість background-repeat?

Виберіть правильну відповідь

Яка властивість визначає положення фонового зображення елемента?

Яка властивість визначає положення фонового зображення елемента?

Виберіть правильну відповідь

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 2
some-alt