Позиционирование фона

Благодаря свойству background-repeat существует возможность размещать большое изображение на заднем плане документа и не допустить его повторения. Давайте расширим эту возможность и изменим местоположение изображения. Например, можно центрировать фоновое изображение в элементе body:

body {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: center;}

Фактически вы поместили единственное изображение на задний план, а затем предотвратили его повторение с помощью значения no-repeat. Любой фон, включающий изображение, начинается с одного изображения, которое затем повторяется (или нет) в соответствии со значением свойства background-repeat. Эта начальная точка называется базовой точкой изображения (origin image). Размещение базовой точки изображения выполняется с помощью свойства background-position, и есть несколько способов задания значений этого свойства. Во-первых, ключевые слова top, bottom, left, right и center. Как правило, они появляются попарно, но (как показывает предыдущий пример) не всегда.

Во-вторых, значения, заданные в единицах измерения длины, такие как 50px или 2сm, и процентные значения.


Каждый тип значения по-своему размещает фоновое изображение. Я должен упомянуть еще о контексте, в котором размещаются фоновые изображения. CSS2 и CSS2.1 утверждают, что свойство background-position применяется для размещения исходного изображения относительно края отступов элемента. Иначе говоря, контекст размещения изображения – внутренний край рамки, даже несмотря на то, что область фона распространяется до внешнего края рамки. Не все броузеры размещают изображения правильно: некоторые помещают базовую точку изображения относительно внешнего, а не внутреннего края рамки. В любом случае, когда рамок нет, эффект одинаков.

Для тех, кому интересно, как изменился CSS: CSS1 определял местоположение относительно области содержимого. Независимо от контекста размещения изображения мозаично выложенное фоновое изображение заполняет весь фон области рамки, потому что мозаичное изображение распространяется во всех четырех направлениях. Позже мы поговорим об этом более подробно. Сначала надо выяснить, как исходное изображение может быть размещено в элементе.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Еще раз о повторении в определенном направлении
Замещение атрибутов
Значения, заданные в единицах измерения длины

Вернуться в раздел: CSS / 9. Цвета и фон