JS властивість CSSStyleDeclaration.backgroundImage
Загальний опис
backgroundImage — це властивість об'єкта style, що дозволяє встановлювати або змінювати фонове зображення HTML-елемента. Ця властивість є корисною при створенні динамічних веб-сторінок, де необхідно змінювати фонові зображення елементів без потреби в перезавантаженні сторінки. Основне призначення властивості backgroundImage полягає в задаванні зображення як фону для певного HTML-елемента, що може значно покращити візуальне сприйняття сторінки та зробити її більш привабливою для користувача.
Для того щоб скористатися властивістю backgroundImage, спочатку необхідно отримати доступ до HTML-елемента за допомогою методів, таких як document.getElementById, document.querySelector або інших методів доступу до DOM. Після цього можна встановити або змінити значення властивості backgroundImage.
Розглянемо приклад базового використання цієї властивості. Припустимо, у нас є HTML-елемент з ідентифікатором myElement:
<div id="myElement">Це мій елемент</div>
Для того щоб встановити фонове зображення для цього елемента, скористаємося наступним кодом JavaScript:
let element = document.getElementById("myElement");
element.style.backgroundImage = "url('path/to/image.jpg')";
У даному прикладі ми отримуємо доступ до елемента з ідентифікатором myElement за допомогою методу document.getElementById і встановлюємо фонове зображення через властивість style.backgroundImage. Значенням властивості є рядок, що починається з url, всередині якого вказано шлях до зображення.
Фонові зображення можуть бути різних типів, зокрема це можуть бути абсолютні або відносні шляхи до файлів, зображення, закодовані у форматі Data URL, та градієнти. Розглянемо приклади для кожного з цих типів.
- Використання абсолютного шляху:
element.style.backgroundImage = "url('https://example.com/image.jpg')";
- Використання відносного шляху:
element.style.backgroundImage = "url('images/background.jpg')";
- Використання Data URL:
element.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...')";
- Використання градієнта:
element.style.backgroundImage = "linear-gradient(to right, red, yellow)";
Варто зауважити, що встановлення фонових зображень за допомогою властивості backgroundImage не обмежується лише одним зображенням. Можна встановлювати декілька фонів одночасно, розділяючи їх комами:
element.style.backgroundImage = "url('image1.jpg'), url('image2.png')";
Крім того, фонове зображення може поєднуватися з іншими властивостями стилю, такими як backgroundSize, backgroundPosition, backgroundRepeat та інші, для точнішого налаштування відображення фону.
Розглянемо приклад комплексного використання властивості backgroundImage разом з іншими властивостями:
element.style.backgroundImage = "url('image.jpg')";
element.style.backgroundSize = "cover";
element.style.backgroundPosition = "center";
element.style.backgroundRepeat = "no-repeat";
У цьому прикладі ми встановлюємо зображення image.jpg як фонове для елемента, задаємо його розмір, щоб зображення покривало весь елемент (backgroundSize), розміщуємо його по центру (backgroundPosition) та забороняємо повторення (backgroundRepeat).
Отже, властивість backgroundImage є потужним інструментом для роботи з фоновими зображеннями в HTML-елементах. Її гнучкість дозволяє використовувати різноманітні типи зображень та комбінувати їх з іншими CSS-властивостями для досягнення бажаного візуального ефекту.
| Порада: | Завжди вказуйте правильний шлях до зображення. Це може бути абсолютний шлях (повний URL) або відносний шлях (відносно місця розташування вашого HTML-файлу). Неправильний шлях призведе до того, що зображення не буде завантажено. Наприклад, для завантаження зображення з тієї ж директорії, де знаходиться ваш HTML-файл, використовуйте: |
| Порада: | Використовуйте властивість |
| Порада: | Об'єднуйте кілька фонів для створення складних ефектів. Властивість |
Синтаксис
element.style.backgroundImageЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо використання властивості backgroundImage для зміни фонового зображення елемента div за допомогою радіо-кнопок. Користувач може вибрати одне із трьох зображень, і відповідне зображення буде встановлене як фонове для елемента div з id="box". Зверніть увагу на використання querySelectorAll для отримання всіх радіо-кнопок та addEventListener для додавання обробника події change до кожної радіо-кнопки.
У цьому прикладі ми встановлюємо фонове зображення для елемента div за допомогою властивості backgroundImage. Зверніть увагу, що шлях до зображення має бути вказаний у форматі url().
<div id="myDiv"></div>
<script>
// Отримуємо елемент div
const myDiv = document.getElementById('myDiv');
// Встановлюємо фонове зображення
myDiv.style.backgroundImage = 'url("images/pattern.jpg")';
</script>У цьому прикладі ми створюємо функцію, яка змінює фонове зображення елемента при наведенні курсора миші. Властивість backgroundImage використовується для зміни фонового зображення, а event.target дозволяє отримати поточний елемент, над яким знаходиться курсор. Зверніть увагу на використання this для доступу до поточного елемента всередині функції.
<div id="myDiv" onmouseover="changeBackground(event)">Наведіть курсор на цей div</div>
<script>
// Масив шляхів до зображень
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let currentIndex = 0;
function changeBackground(event) {
// Отримуємо поточний елемент
const targetElement = event.target;
// Змінюємо фонове зображення
targetElement.style.backgroundImage = `url('images/${images[currentIndex]}')`;
// Переходимо до наступного зображення в масиві
currentIndex = (currentIndex + 1) % images.length;
}
</script>