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

Для установки цвета текста элемент существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции:

<P>  { color: blue }
<EM> { color: rgb(0, 0, 255) }

Оба правила в примере устанавливают синий цвет текста соответствующих элементов.

Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно устанавливать одновременно все значения параметров фона.

Цвет фона определяется значением свойства background-color, а изображение, используемое в качестве фона, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также цвет фона, который будет использоваться в случае недоступности файла изображения.

BODY { background-color: lightsteelblue;
       background-image: url(/image/image.gif) }
<P>  { background-image: none }

В приведённом примере задается адрес файла изображения для фона тела документа и явно указывается отсутствие фона для абзацев документа.

Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется). Приведём пример кода в котором задаётся повторяемость изображения фона по вертикали:

Образец действия кода тут.

Свойство background-attachment определяет, будет ли фон, на котором изображается документ, оставаться неподвижным при прокрутке содержимого окна браузера или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке. Пример закреплённого в окне браузера изображения фона представлен ниже:

Образец действия кода тут.

Свойство background-position определяет начальное положение изображения, используемого в качестве фона, в блоке содержимого элемента. Значением этого свойства являются координаты привязки определённых точек изображения и блока содержимого. Их можно задать в процентах, в абсолютных единицах длины, а также с использование комбинаций ключевых значений.

Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных например 10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.

Пара абсолютных значений, например 10mm 10mm, размещает верхний левый угол изображения на 10 мм правее и на 10 мм ниже левого верхнего угла блока содержимого.

Ключевые значения и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в таблице:

Свойство background позволяет одновременно устанавливать значения свойств background-color, background-image, background-repeat и background-attachment. Все допустимые значения индивидуальных свойств задаются в виде списка, элементы которого отделены пробелами. Если значение какого-либо свойства не задано, то оно устанавливается в начальное значение, определяемое браузером:

BODY { background: lightsteelblue url(image/image.gif) center }

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

Примечание
Свойство color наследуется по обычным правилам. Все свойства, определяющие параметры фона, не наследуются, но фон элемента-родителя будет отображаться по умолчанию, так как начальным значением свойства background-color является transparent (прозрачный).