Свойство background-position CSS

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

background-position Свойство устанавливает начальное положение изображения фона.

Эта свойство устанавливает исходное изображение фона (от background-image Местоположение определения (position) изображения фона, если оно должно повторяться, начнется с этой точки.

Совет:Вам нужно установить атрибут background-attachment в "fixed", чтобы обеспечить нормальную работу этого атрибута в Firefox и Opera.

См. также:

Уроки CSS:Фон CSS

Руководство по CSS:Атрибут background-image

Руководство по HTML DOM:Атрибут backgroundPosition

Пример

Как позиционировать фоновое изображение:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

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

CSS грамматика

background-position: value;

Значение атрибута

Значение Описание
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Если вы указали только один ключевой слово, то второе значение будет "center".

Значение по умолчанию: 0% 0%.
x% y%

Первое значение - горизонтальное положение, второе значение - вертикальное положение.

Upper left corner is 0% 0%. Lower right corner is 100% 100%.

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

Первое значение - горизонтальное положение, второе значение - вертикальное положение.

Upper left corner is 0 0. Единицы измерения - пиксели (0px 0px) или любая другая единица CSS.

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

Вы можете смешивать % и значения position.

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

Значение по умолчанию: 0% 0%
Унаследованность: нет
Версия: CSS1
JavaScript грамматика: объект.style.backgroundPosition="center"

Более примеров

Как использовать % для позиционирования фонового изображения
Этот пример демонстрирует, как использовать проценты для позиционирования фонового изображения на странице.
Как использовать пиксели для позиционирования фонового изображения
Этот пример демонстрирует, как использовать пиксели для позиционирования фонового изображения на странице.

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome Edge Firefox Сafari Опера
Chrome IE / Edge Firefox Сafari Опера
1.0 4.0 1.0 1.0 3.5