JS властивість CSSStyleDeclaration.backgroundPosition

Загальний опис

backgroundPosition — це властивість, яка дозволяє встановлювати або повертати позицію фону елемента. Вона є важливою для налаштування візуального вигляду вебсторінок, зокрема для точного розташування фонових зображень у межах елемента. Використовується в CSS для контролю над тим, як фонове зображення буде відображатись відносно меж елемента. Ця властивість є корисною в ситуаціях, коли потрібно створити складні фонові ефекти або налаштувати фон відповідно до дизайну вебсторінки.

Використання властивості backgroundPosition

Встановлення позиції фону

Для найпростішого випадку, ви можете встановити позицію фону за допомогою двох значень, які визначають горизонтальну і вертикальну позиції. Ці значення можуть бути визначені у відсотках, пікселях, або за допомогою ключових слів (left, right, top, bottom, center).

let element = document.getElementById('myElement');
element.style.backgroundPosition = '50% 50%'; // Центрує фон у межах елемента

У цьому прикладі фонове зображення буде розташоване по центру елемента як по горизонталі, так і по вертикалі.

Використання ключових слів

Ключові слова дозволяють швидко і легко встановити позицію фону без необхідності вказувати точні координати.

element.style.backgroundPosition = 'right bottom'; // Розташовує фон у правому нижньому куті елемента

Цей код розміщує фонове зображення у правому нижньому куті елемента, що може бути корисним для створення специфічних візуальних ефектів.

Комбінування відсотків і ключових слів

Ви також можете комбінувати відсоткові значення з ключовими словами для більшої гнучкості.

element.style.backgroundPosition = 'left 25%'; // Розташовує фон по лівому краю, але на 25% вниз від верхнього краю

Цей підхід дозволяє точно налаштувати позицію фону залежно від дизайну вашої сторінки.

Використання пікселів для точного розташування

Якщо вам потрібна абсолютна точність, ви можете використовувати пікселі для встановлення позиції фону.

element.style.backgroundPosition = '10px 20px'; // Розташовує фон на 10 пікселів від лівого краю та на 20 пікселів від верхнього краю

Цей метод є корисним, коли потрібно точно розташувати фонове зображення відносно меж елемента.

Використання з іншими CSS-властивостями

Властивість backgroundPosition часто використовується разом з іншими CSS-властивостями, такими як backgroundSize, backgroundRepeat та backgroundImage, для створення комплексних фонових ефектів.

element.style.backgroundImage = 'url("background.jpg")';
element.style.backgroundSize = 'cover';
element.style.backgroundRepeat = 'no-repeat';
element.style.backgroundPosition = 'center center';

Цей код встановлює фонове зображення, яке покриває весь елемент, не повторюється і розташоване по центру.

Висновок

Властивість backgroundPosition є потужним інструментом для керування розташуванням фонових зображень у межах елемента. Вона надає велику гнучкість у налаштуванні візуальних ефектів на вебсторінках, дозволяючи використовувати різні одиниці вимірювання та ключові слова для точного позиціонування. Використовуючи цю властивість разом з іншими CSS-властивостями, можна створювати складні та привабливі дизайни.

правити

Порада

Використовуйте backgroundPosition для створення адаптивних дизайнів. Встановлюючи позицію фону у відсотках, ви можете забезпечити, щоб фонове зображення залишалося пропорційно розташованим незалежно від розміру вікна браузера. Наприклад, element.style.backgroundPosition = '50% 50%' гарантує, що фон завжди буде центрованим.

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

Порада

Комбінуйте ключові слова та одиниці вимірювання для точного налаштування позиції фону. Ви можете використовувати ключові слова, такі як left, right, top, bottom, разом із відсотками або пікселями для більшої гнучкості. Наприклад, element.style.backgroundPosition = 'left 10%' розташовує фон по лівому краю, але на 10% вниз від верхнього краю.

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

Порада

Використовуйте backgroundPosition разом із іншими властивостями фону для створення складних візуальних ефектів. Наприклад, поєднання з backgroundSize та backgroundRepeat дозволяє налаштувати розмір і повторення фону. Код element.style.backgroundSize = 'cover'; element.style.backgroundRepeat = 'no-repeat'; element.style.backgroundPosition = 'center center'; забезпечує, що фон покриває весь елемент, не повторюється і центрований.

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

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

Синтаксис

element.style.backgroundPosition

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

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

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

Переглядач
	-	-

Приклади

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

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент за його ID
let element = document.getElementById('myElement');

// Встановлюємо фонове зображення
element.style.backgroundImage = 'url("background.jpg")';

// Центруємо фонове зображення горизонтально і вертикально
element.style.backgroundPosition = '50% 50%';

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент за його ID
let element = document.getElementById('myElement');

// Встановлюємо фонове зображення
element.style.backgroundImage = 'url("background.jpg")';

// Встановлюємо початкову позицію фону
element.style.backgroundPosition = '0 0';

// Використовуємо CSS для створення анімації переміщення фону
const style = document.createElement('style');
style.innerHTML = `
  @keyframes moveBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 100px 100px;
    }
  }

  #myElement {
    animation: moveBackground 5s infinite alternate;
  }
`;
document.head.appendChild(style);