Свойство background-position определяет положение фонового изображения элемента.
Исходной точкой, относительно которой задается положение фонового изображения, является верхний левый угол элемента.
Это свойство применимо к блочным элементам (подробнее здесь...).
Значение свойства background-position
У свойства background-position два значения: положение по горизонтали и положение по вертикали, которые задаются двумя способами:
При помощи ключевых слов:
- положение по горизонтали:
- left – в левой части элемента,
- right - в правой части элемента,
- center - в центре элемента;
- положение по вертикали:
- top – в верхней части элемента,
- bottom - в нижней части элемента,
- center - в центре элемента.
В единицах, принятых в CSS (подробнее здесь...)
Можно указать как одно, так и два значения:
Если указать два значения, то:
- при числовом методе - первое число задает положение фонового изображения по горизонтали, а второе - по вертикали;
- при использовании ключевых слов - порядок их следования не важен.
Можно использовать смешанный вариант: положение по горизонтали указать с помощью ключевого слова, а по вертикали более точно - например в пикселях (или наоборот).
Если указать одно значение с помощью ключевых слов (по горизонтали или вертикали), то вторым значением будет center .
Если указать одно значение, например, в пикселях или в %, то оно будет задавать положение фонового изображения по горизонтали, а значение по вертикали будет center.
- inherit - принимает значение свойства родительского элемента.
- в левом верхнем углу элемента.
<html>
<head>
<meta charset="utf-8">
<title> Свойство background-position </title>
<style type="text/css">
body {margin:5px; background-image:url(img/peng_128.gif); background-repeat:no-repeat; background-position:70%}
h2 {background-image:url(img/peng_64.gif); background-repeat:no-repeat; background-position:50px 20px}
h3 {background-image:url(img/peng_32.gif); background-repeat:no-repeat; background-position:right}
</style>
</head>
<body>
<p> Фоновое изображение страницы располагается по центру в вертикальной плоскости, и на расстоянии 70% (относительно свободного пространства) от левого края страницы в горизонтальной плоскости. </p>
<h2> Положение фонового изображения заголовка второго уровня зададим в пикселях: 50 пикселей - расстояние от левого края заголовка, 20 пикселей - от верхнего края заголовка. </h2>
<h3> Положение фонового изображения заголовка третьего уровня зададим с помощью ключевого слова right. </h3>
</body>
</html>
