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-властивостями, можна створювати складні та привабливі дизайни.

Синтаксис

element.style.backgroundPosition

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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

// Отримуємо елемент за його 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);