Веб-школа



Свойство 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

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

Все свойства фона — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).