... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Свойства CSS. Цвет и фон (стр.3).

 

 

Цвет и фон ||  Шрифт ||  Изменение размера шрифта ||  Текст и его свойства ||  Интервалы


Свойство 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%, т.е. оно всегда размещается в левом верхнем углу.

 

Страница: - 1 - | - 2 - | - 3 - | - 4 -

 

Цвет и фон ||  Шрифт ||  Изменение размера шрифта ||  Текст и его свойства ||  Интервалы

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены