background-position
|
CSS |
Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
Android |
iOS |
|
3 |
9.0+ |
1.0+ |
10.5+ |
1.3+ |
3.6+ |
2.1+ |
1.0+ |
Краткая информация
|
Значение по умолчанию |
0% 0% |
|
Наследуется |
Нет |
|
Применяется |
К блочным элементам |
|
Ссылка на спецификацию |
|
Версии CSS
|
CSS 1 |
CSS 2 |
CSS 2.1 |
CSS 3 |
|
|
|
|
+ |
Описание
Задает начальное положение фонового изображения, установленного с помощью свойства background-image. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис
|
CSS 3 |
background-position: [<позиция>, <позиция>] |
Здесь:
<позиция> = [left | center | right | <проценты> | <значение>] || [top | center | bottom] <проценты> | [<значение>] | inherit.
Значения
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
При inherit значение наследуется у родителя элемента.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> background-position </title>
<style type="text/css">
html {
height: 100%; /* Высота страницы */
}
body {
background-image: url(images/mybg.png); /* Путь к фоновому
рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: no-repeat; /* Отменяем повторение фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
Пример 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> background-position </title>
<style>
body {
background-image: url(images/pattern-left.png),
url(images/pattern-right.png);
background-repeat: repeat-y, repeat-y;
background-position: left, right;
}
</style>
</head>
<body>
<div style="height:2000px">
</div>
</body>
</html>
Объектная модель
[window.]document.getElementById("elementID").style.backgroundPosition
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Категория: Фон