Свойство background-position устанавливает местоположение фоновой картинки. При этом свойству обычно присваивается пара значений - для определения горизонтального и вертикального положений.

Например:

Результат:

Это результат стиля Это результат стиля

Это результат стиля Это результат стиля

Это результат стиля Это результат стиля

Это результат стиля Это результат стиля

 

В данном случае картинка будет расположена на расстоянии 30% слева по горизонтали и 40% сверху по вертикали.

Вообще, если указана пара значений, то первое обычно применяется к горизонтальному положению, второе - к вертикальному.

Если дано только одно значение, то оно применяется к горизонтальному положению, при этом вертикальное будет равно 50% (посередине).

При указании значений, кроме процентов можно использовать ключевые слова, принятые в CSS меры длины и их комбинации.

Пример

Местоположение фоновой картинки отсчитывается от внутренней стороны рамки (border) элемента.

Пример

Возможные значения

процент% процент%
Первое значение определяет положение по горизонтали, второе - по вертикали. Например, 0% 0% - верхний левый угол. 100% 100% - правый нижний.
процент%
Горизонтальное положение картинки в процентах от 0% до 100%. Вертикальное значение будет равным 50% (=посередине).
расстояние расстояние
Указывает местоположение (по горизонтали и вертикали соответственно) с использованием принятых в CSS способов задания размеров.
расстояние
Горизонтальное положение картинки, указанное одним из принятых в CSS способов задания размеров. Вертикальное значение будет равным 50% (=посередине).
left top
Верхний левый угол - то же самое, что 0% 0% или top left.
top
Посередине, наверху. То же самое, что и 50% 0%, top center, center top.
right top
Верхний правый угол. То же самое, что и 100% 0%, top right.
left
Слева, посередине. То же самое, что и 0% 50%, left center, center left.
center
В центре. То же самое, что и 50% 50%, center center.
right
Справа, посередине. То же, что и 100% 50%, right center, center right.
left bottom
Левый нижний угол. То же самое, что и 0% 100%, bottom left.
bottom
Посередине, внизу. То же, что и 50% 100%, center bottom, bottom center.
right bottom
Правый нижний угол. То же самое, что и 100% 100%, bottom right.
inherit
Заимствует значение свойства у родительского элемента.

Характеристики

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

Применяется: Ко всем элементам

Наследуется: Нет

См. также
background
background-color
background-repeat
background-attachment
background-image