background-position
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство background-position определяет начальное положение фонового изображения. Оно может содержать одно или два значения. Если указано только одно значение, то оно применяется к горизонтальному положению, при этом вертикальное будет равно 50% (центр). Если указана пара значений, первое применяется к горизонтальному положению, второе - к вертикальному.
Допускается указывать более одного начального положения, через запятую. Каждое новое расположение применяется к соответствующему фоновому изображению в том порядке, который определён в свойстве background-image.
| Значение по умолчанию: | 0% 0% |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.backgroundPosition="center" |
Синтаксис
background-position: значение;
Значения свойства
| Значение | Описание |
|---|---|
|
left top left center left bottom right top right center right bottom center top center center center bottom |
Если вы указываете только одно ключевое слово, второе будет "center". |
| x% y% | Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%. |
| xpos ypos | Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями(0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
background-position:
Результат:
CSS Код:
div {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left top;
}
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left top;
}