Стиль свойства backgroundPosition

Определение и использование

backgroundPosition Установить или вернуть положение фона изображения в элементе.

См. также:

Стили HTML:Свойство background

Урок CSS:Фон CSS

Урок CSS3:Фон CSS3

Руководство по CSS:Свойство background-image

Руководство по CSS:Свойство background-position

Пример

Пример 1

Измените положение фона изображения:

document.body.style.backgroundPosition = "top right";

Попробуйте сами

Пример 2

Измените положение фона изображения в элементе <div> на центр снизу:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

Попробуйте сами

Пример 3

Изменить положение фонового изображения в элементе <div> на горизонтальное 200 пикселей и вертикальное 40 пикселей:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

Попробуйте сами

Пример 4

Возвратить положение фонового изображения в элементе <div>:

document.getElementById("myDiv").style.backgroundPosition;

Попробуйте сами

Синтаксис

Возвратить атрибут backgroundPosition:

объект.style.backgroundPosition

Установить атрибут backgroundPosition:

объект.style.backgroundPosition = value

Значение свойства

Значение Описание
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
 Если вы указываете только один ключевое слово, другой параметр будет "center".
x% y%

Значение x указывает на горизонтальное положение, а значение y - на вертикальное положение.

Угол верхнего левого угла равен 0% 0%. Угол нижнего правого угла равен 100% 100%.

Если вы указываете только один параметр, другой параметр будет 50%.
xpos ypos

Значение x указывает на горизонтальное положение, а значение y - на вертикальное положение.

Угол верхнего левого угла равен 0 0. Единицей измерения может быть пиксель (0px 0px) или любая другая единица CSS.

Если вы указываете только один параметр, другой параметр будет 50%. Вы можете комбинировать % и единицы измерения.
initial Установите это свойство в его значение по умолчанию. См. initial.
inherit Инherit this property from its parent element. См. inherit.

Технические детали

по умолчанию: 0% 0%
Возвратное значение: строка, представляющая положение фонового изображения.
Версия CSS: CSS1

поддержка браузерами

backgroundPosition является функцией CSS1 (1996)。

Все браузеры полностью поддерживают его:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
поддержка поддержка поддержка поддержка поддержка поддержка