/css/background-position:> Положение фонового изображения_

Свойство background-position

Синтаксис

CSS 1
CSS 2.0
CSS 2.1‒2.2
CSS 3
background-position [ [ <процент> | <длина> | left | center | right ] [ <процент> | <длина> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit;

Описание

Свойство background-position (от англ. "background position" ‒ «положение фона») определяет начальное положение каждого фонового изображения.

Применяется: в CSS 1‒2.0 к элементам блочного уровня и замещаемым элементам,
в CSS 3 ко всем элементам;
Наследование: отсутствует;
Проценты: в CSS 1 относительно размера самого элемента,
в CSS 2.0-2.2 относительно размера собственной коробки,
в CSS 3 относительно размера позиционирования области фона минус размер фонового изображения;
Медиа: визуальные.

Условия использования

JavaScript

[объект].style.backgroundPosition="[значение]";


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

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация


Значения

В качестве значения свойства указывается смещение фонового изображения по горизонтали и по вертикали (например, значение «100% 100%» помещает нижний правый угол изображения в нижний правый угол элемента). Если заданы значения как для вертикального, так и для горизонтального положения, то горизонтальное положение идёт первым. Если задано только одно значение, то оно устанавливает только горизонтальное положение (за исключением чисто вертикальных значений «bottom» и «top»), а вертикальное положение будет соответствовать значению «center».

<процент>
Указывает в процентах смещение (по вертикали | по горизонтали) фонового изображения от левого верхнего угла коробки (точка отсчёта по умолчанию).
Размеры участвующие в вычислении процентного значения расположения фонового элемента
Размеры
  • Процентное значение для горизонтального смещения вычисляется относительно разницы «ширины области позиционирования фона» и «ширины фонового изображения» [x = (ew - iw) * (<процент> / 100)], где размер изображения равен размеру заданному свойством «background-size».
  • Процентное значение для вертикального смещения вычисляется относительно разницы «высоты области позиционирования фона» и «высоты фонового изображения» [y = (eh - ih) * (<процент> / 100)], где размер изображения равен размеру заданному свойством «background-size».

К примеру, если свойству задана пара значений «0% 0%», то верхний левый угол изображения совпадает с верхним левым углом отступа коробки. Пара значений «100% 100%», присваиваемая свойству, помещает нижний правый угол изображения в нижний правый угол отступа коробки.

Пример смещения фонового изображения (в процентных значениях) background-position: 50% 50%;

Примечание: допускаются отрицательные значения процента.

<длина>
Указывает фиксированную длину в качестве величины смещения (по вертикали | по горизонтали) фонового изображения от левого верхнего угла коробки (точка отсчёта по умолчанию). К примеру, если свойству задана пара значений «2cm 1cm», то верхний левый угол изображения помещается на 2см вправо и на 1см ниже верхнего левого угла «области позиционирования фона».

Пример смещения фонового изображения (в значениях длины) background-position: 25px 10px;

Примечание: допускаются отрицательные значения длины.

bottom
Если для вертикального положения задано одно значение, то вычисляется как «100%». Если для вертикального положения задано два значения, то «bottom» (который должен быть указан в качестве первого значения) определяет нижний край в качестве начала для следующего вертикального смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением bottom) background-position: left bottom;

Примечание: если «bottom» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «50% 100%».

center
Вычисляется как «50%» left 50%») для горизонтального положения, если не указано иное горизонтальное положение, или «50%» top 50%») для вертикального положения, если оно есть.

Пример смещения фонового изображения (со значением center) background-position: center;

Примечание: если «center» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «50% 50%».

left
Если для горизонтального положения задано одно значение, то вычисляется как «0%». Если для горизонтального положения задано два значения, то «left» (который должен быть указан в качестве первого значения) определяет левый край в качестве начала для следующего смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением left) background-position: left center;

Примечание: если «left» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «0% 50%».

right
Если для горизонтального положения задано одно значение, то вычисляется как «100%». Если для горизонтального положения задано два значения, то «right» (который должен быть указан в качестве первого значения) определяет правый край в качестве начала для следующего смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением right) background-position: right 25% center;

Примечание: если «right» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «100% 50%».

top
Если для вертикального положения задано одно значение, то вычисляется как «0%». Если для вертикального положения задано два значения, то «top» (который должен быть указан в качестве первого значения) определяет верхний край в качестве начала для следующего смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением top) background-position: right 5% top 5px;

Примечание: если «top» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «50% 0%».

inherit
Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: «0% 0%».

Примечание: в CSS 1-2.0 ключевые слова нельзя использовать в сочетании с процентными значениями или значениями длины.


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство background-position</title>
<style type="text/css">
body {
background: url('/examples/images/fig-red.png') repeat-y;
background-position: center; /* CSS 1-2.2 */
background-position: right 50% bottom 50%; /* CSS 3 */
}
</style>
</head>
<body>
<h1>Положение фоновых изображений</h1>
<p>Фоновое изображение документа повторяется вертикально по центру области просмотра.</p>
</body>
</html>
Свойство background-position