CSS приклад: background-position

Тег CSS background-position з прикладом

Тег CSS background-position встановлює початкове положення фонового зображення, встановленого за допомогою властивості background-image. У CSS3 можна вказувати кілька значень для кожного фону, перераховуючи їх через кому.

Синтаксис

CSS2.1: background-position: [left | center | right | проценти | значення] || [top | center | bottom | проценти | значення] | inherit

CSS3: background-position: позиція[, позиція]*

Значення

Властивість background-position має два значення: положення по горизонталі (може бути left, center, right) і по вертикалі (може бути top, center, bottom). Крім ключових слів положення також можна задати в процентах, пікселях або інших одиницях. При використанні ключових слів порядок їх слідування не має значення, а при відсотковому запису спершу вказується положення зображення по горизонталі, а потім, через пробіл, по вертикалі.

При inherit значення успадковується від батьківського елемента.

Об'єктна модель

[window.]document.getElementById("elementID").style.backgroundPosition

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Часті запитання

  • Q: Як використовувати background-position в CSS?

    A: background-position в CSS використовується для визначення позиції фонового зображення відносно його контейнера.

  • Q: Як встановити позицію background-position в CSS?

    A: Позицію background-position в CSS можна встановити за допомогою ключових слов (наприклад, left top), відсотків або пікселів.

  • Q: Де використовують background-position в CSS?

    A: background-position в CSS використовується при стилюванні елементів, які мають фонове зображення, наприклад, кнопок, блоків, заголовків тощо.

  • Q: Як використовувати background-position для спрайтів в CSS?

    A: background-position в CSS може бути використаний для відображення конкретного фрагмента зображення зі спрайта.

  • Q: Як використовувати background-position для анімації в CSS?

    A: background-position в CSS може бути використаний для створення анімації, переміщуючи позицію фонового зображення у межах його контейнера.