Свойство BACKGROUND-POSITION
Данное свойство используется для начального позиционирования
относительно окна браузера или блока фонового изображения, подключенного
с помощью свойства background-image. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов.
Если значения задаются в процентах, то соответствующая точка
изображения помещается в указанную точку экрана или блока. Например,
если указываются значения 0% 0%, то точка изображения с координатами 0%,
0% (т.е. его левый верхний угол) помещается в левый верхний угол экрана
или блока. Если указывается 100% 100%, то правый нижний угол
изображения помещается в правый нижний угол экрана или блока. При
указании значения 18% 64% точка изображения с координатами 18%, 64%
помещается в точку экрана или блока с координатами 18%, 64%.
|
BODY {
background-image: url(picture.gif);
background-position: 0% 0% }
|
В качестве значения допускается задание координаты точки относительно
левого верхнего угла окна браузера. В эту точку помещается левый
верхний угол фонового изображения. Координаты точки могут задаваться при
помощи любых допустимых в CSS абсолютных единиц измерения длины: пикселях, сантиметрах и т.д.
Использование единиц измерения можно комбинировать, т.е. для задания
одной координаты можно использовать одну единицу, а для задания другой —
другую. Допускается задание отрицательных значений, в этом случае
фоновое изображение как бы смещается за пределы экрана или блока.
BODY {
background-image: url(picture.gif);
background-position: -20px 1cm }
|
Кроме этого, можно задавать положение фонового изображения на экране
при помощи ключевых слов. Ключевые слова те же, с помощью которых
задается выравнивание в языке HTML. Для выравнивания изображения по
вертикали используются ключевые слова:
- top — верх изображения выравнивается по верхнему краю страницы или блока;
- center — центр изображения выравнивается по центру страницы или блока;
- bottom — низ изображения выравнивается по нижнему краю страницы или блока.
Для выравнивания по горизонтали используются следующие:
- left — левый край изображения выравнивается по левому краю страницы или блока;
- center — центр изображения выравнивается по центру страницы или блока;
- right — правый край изображения выравнивается по правому краю страницы или блока.
|
BODY {
background-image: url(picture.gif); background-position: top center
}
|
Позиционирование фонового изображения, выполняемое с помощью ключевых
слов, можно реализовать и при помощи задания значений в процентах, так
как значения top left и left top аналогичны значению '0% 0%'; a center и center center - значению '50% 50%'.
Если задано только одно значение длины или одно процентное
соотношение, то оно определяет позицию только по горизонтали, а позиция
по вертикали принимается как значение 50%. Если задано два значения, то
первой указывается позиция по горизонтали. Допускается сочетание
значений длины и процентных соотношений (например, '50% 2cm'). Также
допускается использование отрицательных значений. Ключевые слова не
могут использоваться вместе со значениями длины или процентными
соотношениями.
Таким образом, правило:
|
BODY {
background-image: url(picture.gif);
background-position: center }
|
равносильно указанию значения 50% 50% или center center.
Хочу заметить только одну особенность браузера Opera, который в этом
случае корректно выравнивает изображение по горизонтали, а вот
выравнивание по вертикали на позицию 50% не выполняет. Поэтому в любом
случае лучше явно указывать обе координаты: 5 0 % 50%.
Ну и в заключение хотелось бы отметить, что в языке HTML нет атрибута, позволяющего позиционировать фоновое изображение. Положение такого изображения всегда определяется из расчета 0% 0%, т.е. оно всегда размещается в левом верхнем углу.
|