Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Застосування Фонових Зображень до Елементів | Додавання Декоративних Ефектів за Допомогою CSS
Основи CSS

bookЗастосування Фонових Зображень до Елементів

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

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

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

index.html

index.html

index.css

index.css

copy

background-repeat

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

background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html

index.html

index.css

index.css

copy

background-position

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

background-position: x y
index.html

index.html

index.css

index.css

copy

background-size

Керує масштабуванням фонового зображення:

background-size: auto | cover | contain | value in px/em/rem;
  • auto: оригінальний розмір зображення;
  • cover: заповнює весь елемент, можливе обрізання;
  • contain: вміщує все зображення, можливі порожні області;
  • value: власний розмір (наприклад, 100px 50px, 50%).
index.html

index.html

index.css

index.css

copy

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

bookЗастосування Фонових Зображень до Елементів

Свайпніть щоб показати меню

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

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

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

index.html

index.html

index.css

index.css

copy

background-repeat

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

background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html

index.html

index.css

index.css

copy

background-position

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

background-position: x y
index.html

index.html

index.css

index.css

copy

background-size

Керує масштабуванням фонового зображення:

background-size: auto | cover | contain | value in px/em/rem;
  • auto: оригінальний розмір зображення;
  • cover: заповнює весь елемент, можливе обрізання;
  • contain: вміщує все зображення, можливі порожні області;
  • value: власний розмір (наприклад, 100px 50px, 50%).
index.html

index.html

index.css

index.css

copy

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

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

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

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

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