Свойство background-position
Синтаксис
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 относительно размера позиционирования области фона минус размер фонового изображения; |
Медиа: | визуальные. |
Условия использования
- Если фоновое изображение фиксируется относительно области просмотра, изображение помещается относительно области просмотра, а не области отступа элемента.
- Начиная с CSS3 (через запятую) можно указать положение для каждого фонового изображения элемента.
JavaScript
[объект]
Поддержка браузерами
Спецификация
Значения
В качестве значения свойства указывается смещение фонового изображения по горизонтали и по вертикали (например, значение «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» (который должен быть указан в качестве первого значения) определяет нижний край в качестве начала для следующего вертикального смещения (определяемого вторым значением).background-position: left bottom;
Примечание: если «bottom» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «
50% 100%
». - center
- Вычисляется как «
50%
» («left 50%
») для горизонтального положения, если не указано иное горизонтальное положение, или «50%
» («top 50%
») для вертикального положения, если оно есть.background-position: center;
Примечание: если «center» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «
50% 50%
». - left
- Если для горизонтального положения задано одно значение, то вычисляется как «
0%
». Если для горизонтального положения задано два значения, то «left» (который должен быть указан в качестве первого значения) определяет левый край в качестве начала для следующего смещения (определяемого вторым значением).background-position: left center;
Примечание: если «left» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «
0% 50%
». - right
- Если для горизонтального положения задано одно значение, то вычисляется как «
100%
». Если для горизонтального положения задано два значения, то «right» (который должен быть указан в качестве первого значения) определяет правый край в качестве начала для следующего смещения (определяемого вторым значением).background-position: right 25% center;
Примечание: если «right» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «
100% 50%
». - top
- Если для вертикального положения задано одно значение, то вычисляется как «
0%
». Если для вертикального положения задано два значения, то «top» (который должен быть указан в качестве первого значения) определяет верхний край в качестве начала для следующего смещения (определяемого вторым значением).background-position: right 5% top 5px;
Примечание: если «top» задан в качестве единственного значения свойства, то итоговое значение вычисляется как «
50% 0%
». - inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «0% 0%
».
Примечание: в CSS 1-2.0 ключевые слова нельзя использовать в сочетании с процентными значениями или значениями длины.
Пример использования
<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>