CSS стиль background-position. Правила позиционирования фона
CSS стиль background-position задает фонового изображения, установленного с помощью CSS свойства background-image.
Допустимо указывать через запятую несколько значений для каждого фона.
Internet Explorer ниже 9й версии позволяет использовать только одно фоновое изображение.
Краткая информация по CSS-свойству background-position
Значение по умолчанию | 0% 0% |
Наследуется | Нет |
Применяется | К блочным элементам |
Правила написания свойства background-position
background-position: "позиция"[, "позиция"]
Здесь "позиция" - положение фонового изображения по горизонтали и вертикали. Кроме использования ключевых слов (left, center, right, top, center, bottom), положение можно задавать в процентах, пикселях или других единицах. Если используются ключевые слова, то порядок их следования не имеет значения. При записи значения в процентах, или пикселях вначале задается положение изображения по горизонтали, а затем, через пробел, по вертикали.
Резюмируя: если если позиця фона представляет собой пару значений, то первое применяется к горизонтальному положению, второе - к вертикальному. Если дано только одно значение, то оно применяется к горизонтальному положению, а вертикальное будет равно 50% (посередине).
Отношение между ключевыми словами и процентной записью показано ниже:
Объектная модель
Объект.style.backgroundPosition
Пример применения CSS-стиля background-position
У нас есть фон, который нужно установить в правом нижнем углу страницы. Вот, как будет выглядеть наш код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример с background-position</title>
<style>
body {
/* Путь к фоновому изображению */
background-image: url(/img/snowflake.png);
/* Положение фона (справа, внизу) */
background-position: right bottom;
/* Отменяем повторение фона */
background-repeat: no-repeat;
}
</style>
</head>
<body></body>
</html>
Теперь, предположим, у нас два фона, один из которых будет справа, а другой - слева. Вот, как будет выглядеть наш код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример с background-position</title>
<style>
body {
/* Путь к фоновым изображениям */
background-image: url(/img/fon-left.png),
url(/img/fon-right.png);
/* Положение фона */
background-position: left, right;
/* Повторение фона по вертикали */
background-repeat: repeat-y, repeat-y;
}
</style>
</head>
<body></body>
</html>