Свойства фона

В этом разделе будут рассмотрены CSS-свойства фона элемента, а именно background, background-color, background-image, background-repeat, background-position, background-attachment.

Цвет фона устанавливается с помощью background-color. В качестве значения свойство принимает код цвета или значение «transparent», что означает «прозрачный». Правила указания цвета рассмотрены в разделе 4.2.5.

В случае, когда в качестве фона необходимо использовать изображение, применяется свойство background-image. Пример его использования показан в примере ниже.

Использование background-image

background-image: url(../images/mypic.jpg);

Путь к файлу изображения указывается в скобках параметра url. Путь указывается относительно расположения CSS файла, а не HTML документа.

По умолчанию, изображение фона будет повторяться по горизонтали и вертикали, пока не заполнит собой весь элемент, к которому применили данное свойство. В случае, когда необходимо ограничить повторение изображения по горизонтали или по вертикали или предотвратить его повторение, используется CSS-свойство background-repeat. Оно принимает одно из следующих значений: repeat (значение по умолчанию), repeat-x, repeat-y, no-repeat. Смысл этих значений понятен по их названиям.

Еще одно немаловажное свойство, которое помогает при манипуляциях изображением фона, называется background-position. Оно предназначено для установки позиции изображения фона внутри элемента. В качестве значения, это свойство принимает один или комбинацию двух параметров. Это может быть пара числовых значений, разделенных пробелом и выраженных в каких- либо единицах измерения (см. 5.4) или процентах (со знаком «%») смещения относительно верхнего левого угла. Еще это может быть одно или комбинация двух значений, разделенных пробелом, из следующих допустимых: top, bottom, center, left, right. Немного поэкспериментировав на практике, можно легко понять, что означает каждое из этих значений. Ввиду хорошей поддержки этого свойства современными браузерами, оно является весьма полезным во многих случаях. Рассмотрим несколько примеров:

Примеры использования background-position

background-position: 20px 70px;

background-position: 50% 100%;

background-position: bottom right;

background-position: top center;

background-position: left;

Cвойство background-attachment определяет, будет ли изображение фона фиксироваться относительно окна просмотра (значение fixed) или будет перемещаться вместе с документом (значение scroll) в процессе его прокрутки.

Рассмотрим сокращенный (shorthand) способ записи вышеупомянутых свойств фона. Это делается при помощи CSS-свойства background. Рассмотрим несколько примеров:

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

background: #c8eeff url(../images/bg-body.png) repeat-x scroll top;

Из примера видно, что значения свойств фона идут в следующем порядке: background-color, background-image, background-repeat, background-attachment и background-position.

В случае, когда необходимо задать одновременно несколько свойств фона в пределах одного селектора, предпочтение следует отдавать сокращенной записи.

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

Никогда не следует применять прием использования однопиксельного цветного изображения в качестве картинки фона, по причине того, что такой цвет браузер не в состоянии отобразить при помощи background-color. Такой подход может оказаться неожиданным для другого разработчика, что наверняка приведет к дополнительным затратам времени при модификации документа. Это предостережение касается новичков, потому, что, к сожалению, многие учебные пособия по HTML изобилуют подобными «полезными советами».