Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Background-position Background-repeat

Свойство background-position

Описание

Свойство background-position определяет положение фонового изображения элемента.

Исходной точкой, относительно которой задается положение фонового изображения, является верхний левый угол элемента.

Это свойство применимо к блочным элементам (подробнее здесь...).

Значение

У свойства background-position два значения: положение по горизонтали и положение по вертикали, которые задаются двумя способами:

При помощи ключевых слов:

- положение по горизонтали:

- left – в левой части элемента,

- right - в правой части элемента,

- center - в центре элемента;

- положение по вертикали:

- top – в верхней части элемента,

- bottom - в нижней части элемента,

- center - в центре элемента.

В единицах, принятых в CSS (подробнее здесь...)


Можно указать как одно, так и два значения:

Если указать два значения, то:

- при числовом методе - первое число задает положение фонового изображения по горизонтали, а второе - по вертикали;
- при использовании ключевых слов - порядок их следования не важен.

Можно использовать смешанный вариант: положение по горизонтали указать с помощью ключевого слова, а по вертикали более точно - например в пикселях (или наоборот).

Если указать одно значение с помощью ключевых слов (по горизонтали или вертикали), то вторым значением будет center .

Если указать одно значение, например, в пикселях или в %, то оно будет задавать положение фонового изображения по горизонтали, а значение по вертикали будет center.

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- в левом верхнем углу элемента.


Пример

Пример - Свойство background-position

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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>

При просмотре в браузере

Фоновое изображение страницы располагается по центру в вертикальной плоскости, и на расстоянии 70% (относительно свободного пространства) от левого края страницы в горизонтальной плоскости.

Положение фонового изображения заголовка второго уровня зададим в пикселях: 50 пикселей - расстояние от левого края заголовка, 20 пикселей - от верхнего края заголовка.

Положение фонового изображения заголовка третьего уровня зададим с помощью ключевого слова right.


Свойство Background-image Свойство Background-position Свойство Background-repeat
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru