Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Свойства CSS. Цвет и фон. Часть 2


Background-position

Свойство background-position используется для задания местоположения фонового рисунка в окне браузера. Задавать местоположение фонового изображения можно в процентах, единицах длины и с помощью различных ключевых слов.

Задание расположения фонового рисунка в процентах

Создаём таблицу стилей следующего содержания:

body{
background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:20% 20%;
}

Здесь первое значение в процентах указывается по оси X, второе - по оси Y. За начало координат берётся левая верхняя точка окна браузера (0% 0%). Соответственно, значение в процентах, как, впрочем, и в единицах длины задаётся относительно левого верхнего угла фонового изображения.

Теперь создадим html-документ, со стихотворением про щенка, подключим к нему эту таблицу стилей и посмотрим результат.

<html>
 <head>
  <title>Стихотворение про щенка</title>
  <link href="style6.css" type="text/css" rel="stylesheet">
 </head>
 <body>
  <p>У щенка четыре лапы,<br>
Ушки и забавный хвост.<br>
Он пушистый и лохматый.<br>
И прохожих лижет в нос.</p>
 </body>
</html>

Вот и результат. Откройте его в разных браузерах. После этого вы заметите, что в различных браузерах и результат отображается по-разному. Например в Internet Explorer, с каждым прибавленным процентом по оси Y, изображение смещается вниз, а вот в Mozilla Firefox - вверх. Чтобы избежать подобного рода проблем, необходимо задавать местоположение фонового рисунка в единицах длины. Лучший вариант единицы длины для этого - пиксель.

Задание расположения фонового рисунка в единицах длины

Создаём таблицу стилей, похожую на предыдущую, только теперь значение свойства background-position укажем в пикселях.

body{
background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:100px 40px;
}

Получился следующего вида документ, причём во всех браузерах он выглядит одинаково. Также единицы длины для задания координат фонового изображения могут быть разными. По оси X - пиксели, по оси Y - сантиметры и т.д. Например:

background-position:100px 5cm;

Выравнивание фонового рисунка при помощи ключевых слов

Ключевые слова для выравнивания фонового изображения на экране цифрового устройства используются такие же, как и в html. Для выравнивания по оси X (по горизонтали) используются слова:

Для выравнивания по оси Y (по вертикали) используются следующие ключевые слова:

Пример выравнивания фонового изображения:

body{
background-image:url(image.gif);
background-position:right center;
}

Ключевые слова также могут использоваться вместе с единицами длины и процентами. В указании координат изображения первой всегда указывается координата по оси X, второй - по оси Y. Если в качестве значения указывается только одна координата, то по умолчанию, изображение сдвигается по этой координате по оси X, а по оси Y - значение либо center, либо другое - в зависимости от браузера.


Сокращённая запись свойства background

Свойство background для фона страницы или блока можно задавать в упрощённой форме. Например правило вида:

body{
background-image:url(dog.gif);
background-repeat:no-repeat;
background-position:20% 20%;
}

Можно записать и так:

body{
background:url(dog.gif) no-repeat 20% 20%;
}


<<Предыдущая | В раздел | Следующая>>