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, та градієнти. Розглянемо приклади для кожного з цих типів.

1. Використання абсолютного шляху:

element.style.backgroundImage = "url('https://example.com/image.jpg')";

1. Використання відносного шляху:

element.style.backgroundImage = "url('images/background.jpg')";

1. Використання Data URL:

element.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...')";

1. Використання градієнта:

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-властивостями для досягнення бажаного візуального ефекту.

правити

Порада

Об'єднуйте кілька фонів для створення складних ефектів. Властивість backgroundImage дозволяє використовувати більше одного зображення, розділяючи їх комами. Це корисно для створення багатошарових фонів. Наприклад, можна додати прозорий PNG-елемент поверх основного фону:

element.style.backgroundImage = "url('background.jpg'), url('overlay.png')";

автор: Bond правити

Порада

Завжди вказуйте правильний шлях до зображення. Це може бути абсолютний шлях (повний URL) або відносний шлях (відносно місця розташування вашого HTML-файлу). Неправильний шлях призведе до того, що зображення не буде завантажено. Наприклад, для завантаження зображення з тієї ж директорії, де знаходиться ваш HTML-файл, використовуйте:

element.style.backgroundImage = "url('background.jpg')";

автор: Bond правити

Порада

Використовуйте властивість backgroundSize для налаштування розміру фону. Значення cover забезпечить повне покриття елемента зображенням, а contain збереже пропорції зображення, щоб воно вмістилося в елемент. Це допоможе уникнути деформації зображення та забезпечить кращий вигляд вашого елемента:

element.style.backgroundSize = "cover";

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.backgroundImage

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myDiv"></div>

<script>
// Отримуємо елемент div
const myDiv = document.getElementById('myDiv');

// Встановлюємо фонове зображення
myDiv.style.backgroundImage = 'url("images/pattern.jpg")';
</script>

<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>