Background-image — фоновое изображение

Свойство background-image используется для подключения изображения в качестве фона элемента. Для указания требуемого изображения используется функционал url. Например, это правило подключает фоновое изображение для всех абзацев:

p {

background-image: url(background.png);

}

Если также задан цвет фона, то изображение располагается поверх фона. Если у изображения есть прозрачные участки, то они окрашиваются в цвет фона.

Background-repeat — режим повторения изображения

Свойство background-repeat позволяет управлять повтором фонового изображения. Оно может принимать следующие значения:

• repeat — изображение повторяется по горизонтали и вертикали (применяется по умолчанию);

• no-repeat — изображение не повторяется, а отображается только один раз;

• repeat-x — повтор только по горизонтали;

• repeat-y — повтор только по вертикали.

Background-attachment — режим прокрутки (прикрепления) изображения

Свойство background-attachment позволяет управлять прикреплением изображение. Оно может принимать одно из двух значений:

• scroll — изображение прокручивается вместе со страницей (по умолчанию);

• fixed — изображение фиксируется относительно области просмотра. При прокрутке создается эффект движения контента относительно фона. Это может сильно нагружать клиент, которому будет требоваться полностью перерисовывать страницу каждый раз при прокрутке.

Background-position — положение изображения

Свойство background-position управляет положением первого экземпляра изображения (по умолчанию он располагается в верхнем левом углу). Для этого нужно указать координаты левого верхнего угла первого экземпляра изображения. Координаты задаются в единицах длины или процентах.

Особое внимание нужно уделить значениям в процентах. Первый экземпляр изображения располагается таким образом, чтобы точка, которая находится в указанной позиции на изображении, совпадала с точкой, которая находится в указанной позиции относительно области внутреннего отступа элемента. Например, следующее объявление устанавливает первый экземпляр в правый нижний угол, а не за пределы элемента:

background-position: 100% 100%;

Вместо значений 0%, 50% и 100% по горизонтали можно использовать константы left, center, right, а по вертикали — top, center, bottom. Первое значение свойства задает горизонтальную координату, второе — вертикальную. Если используются константы, значения можно менять местами.

Рамки

CSS позволяет создавать линии с любой стороны любого элемента или полностью окружать его рамкой. Для этого используются свойства группы border, которые подробно рассматриваются далее.

Свойства border-top, border-right, border-bottom, border-left

Четыре этих свойства управляют частью рамки с каждой из сторон. В качестве значений можно указывать толщину, цвет и стиль линии. Порядок перечисления не имеет значения. Например, три следующих объявления эквивалентны:

border-top: 1px solid #f00;

border-top: 1px #f00 solid;

border-top: solid 1px #f00;

Любой неуказанный параметр имеет значение по умолчанию. Однако если не указывать стиль, то он будет иметь значение none, а значит, линии не отобразится.

Свойства border-width, border-color, border-style — параметры рамки

Каждое из свойств border-width, border-color, border-style задает один из параметров для всех сторон рамки — ширину, цвет и стиль соответственно. Частные свойства, управляющие этими параметрами, существуют также и для свойств, управляющих только одной стороной рамки. Например, два следующих правила эквивалентны:

p {

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

}

p {

border-style: solid;

}