Свойство CSS background используется для форматирования фона элементов html.

Вы можете изменять следующие свойства CSS:

·  background-color

·  background-image

·  background-repeat

·  background-attachment

·  background-position

Цвет фона

Свойство background-color определяет цвет фона элемента.

Фон страницы указывается в селекторе body:

Пример

body {background-color:#b0c4de;}

Цвет фона может быть указан с помощью:

·       названия цвета, например, "red" (красный)

·       значения RGB, например, "rgb(255,0,0)"

·       шестнадцатиричного кода цвета, например, "#ff0000"

В примере ниже элементы h1, p и div имеют разные цвета фона:

Пример

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Фон-изображение

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

По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.

Фоновое изображение для всей страницы можно задать так:

Пример

body {background-image:url('paper.gif');}

Повторение фонового изображения

По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.

Для того, чтобы повторять фоновое изображение только по горизонтали, надо использовать следующую запись:

Пример

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Для того, чтобы повторять изображение по вертикали, надо заменить значение repeat-x на repeat-y.

Позиционирование фонового изображения и отмена повторения

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

Для того, чтобы фоновое изображение отображалось только один раз, значение свойства background-repeat должно иметь следующее значение:

Пример

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Для изменения положения фонового изображения на странице используется свойство background-position:

Пример

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Краткая запись свойств фона

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

Пример

body {background:#ffffff url('img_tree.png') no-repeat right top;}

При краткой записи соблюдайте порядок указания свойств:

·  background-color

·  background-image

·  background-repeat

·  background-attachment

·  background-position

Если вы не укажете какое-либо из свойств, будет подставлено значение по умолчанию.