Застосування Фонових Зображень до Елементів
background-image властивість дозволяє додати зображення як фон для HTML-елемента. Базовий синтаксис дуже простий:
background-image: url("image-url.jpg");
Як значення для властивості background-image використовується url(), а в дужках вказується url зображення.
index.html
index.css
background-repeat
Визначає, чи буде зображення повторюватися горизонтально, вертикально, в обох напрямках або зовсім не повторюватися.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position використовується для встановлення початкової позиції фонового зображення в області фону елемента. Ця властивість дозволяє вказати, де саме має розміщуватися фонове зображення та як воно повинно позиціонуватися відносно елемента. Необхідно задати позицію по осях x та y
background-position: x y
index.html
index.css
background-size
background-size визначає розмір фонового зображення елемента. Може використовуватися для масштабування зображення під розмір елемента або для встановлення конкретного розміру фонового зображення.
background-size: auto | cover | contain | value in px/em/rem;
autoзберігає фонове зображення у його початковому розмірі (за замовчуванням);coverмасштабує зображення так, щоб воно повністю покривало елемент із збереженням пропорцій, можливе обрізання частин зображення;containмасштабує зображення так, щоб воно повністю вміщувалося в елемент із збереженням пропорцій, можливе утворення порожніх ділянок;valueвстановлює власні розміри для фонового зображення, наприклад,100px 50pxабо відсотки, як-от50%.
index.html
index.css
1. Що робить властивість background-image?
2. Що робить властивість background-repeat?
3. Яка властивість визначає позицію фонового зображення елемента?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Awesome!
Completion rate improved to 2.56Застосування Фонових Зображень до Елементів
Свайпніть щоб показати меню
background-image властивість дозволяє додати зображення як фон для HTML-елемента. Базовий синтаксис дуже простий:
background-image: url("image-url.jpg");
Як значення для властивості background-image використовується url(), а в дужках вказується url зображення.
index.html
index.css
background-repeat
Визначає, чи буде зображення повторюватися горизонтально, вертикально, в обох напрямках або зовсім не повторюватися.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position використовується для встановлення початкової позиції фонового зображення в області фону елемента. Ця властивість дозволяє вказати, де саме має розміщуватися фонове зображення та як воно повинно позиціонуватися відносно елемента. Необхідно задати позицію по осях x та y
background-position: x y
index.html
index.css
background-size
background-size визначає розмір фонового зображення елемента. Може використовуватися для масштабування зображення під розмір елемента або для встановлення конкретного розміру фонового зображення.
background-size: auto | cover | contain | value in px/em/rem;
autoзберігає фонове зображення у його початковому розмірі (за замовчуванням);coverмасштабує зображення так, щоб воно повністю покривало елемент із збереженням пропорцій, можливе обрізання частин зображення;containмасштабує зображення так, щоб воно повністю вміщувалося в елемент із збереженням пропорцій, можливе утворення порожніх ділянок;valueвстановлює власні розміри для фонового зображення, наприклад,100px 50pxабо відсотки, як-от50%.
index.html
index.css
1. Що робить властивість background-image?
2. Що робить властивість background-repeat?
3. Яка властивість визначає позицію фонового зображення елемента?
Дякуємо за ваш відгук!
