Позиция фонового изображения: background-position

background-position

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 4.0 3.5 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.1.1 1.0 7 12.0 5.1
Свойство
background-position — это свойство позволяет задавать позицию фонового изображения
Описание
Свойство работает следующим образом: в его значении нужно указывать две позиции, первая позиция — это положение изображения по горизонтали, вторая позиция — это положение изображения по вертикали, если указывается только одно значение, то это значение будет являться положением по горизонтали, вторая же позиция будет автоматически задана как center. Отсчет положения всегда начинается от левого верхнего угла.
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
значение в абсолютных единицах | значение в относительных единицах | left | center | right | top | bottom | inherit
Значение по умолчанию
left top или 0% 0%
Правила записи
свойство: значение; или свойство: значение значение;
Примеры

<p>

Фоновое изображение в этом абзаце находится в позиции left top

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции left

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции center

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции right

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции right bottom

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 0px 0px

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 30px 15px

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 1em 1em

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 0em 0em

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 0% 0%

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 100% 100%

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 50%

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 100%

</p>

<p>

Фоновое изображение в этом абзаце находится в позиции 50% 50%

</p>

<p>

Это значит что свойство наследует значение от родителя

</p>

Поделиться