Фон (background)

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

Свойства:

background-color - указывает цвет фона.

Значение можно указывать шестнадцатеричным числом:

background-color: #FFOOOO;

или названием цвета:

background-color: red;

В обоих примерах цвет фона будет одинаковый (красный).

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

Поэтому рекомендуется пользоваться шестнадцатеричными выражениями.

background-image - указывает на фонове изображение.

В значении прописывается путь к изображению:

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

background-repeat - указывает на повтор фонового изображения. Может разрешить повтор по обеим осям (x/y), разрешить повтор только для одной из них, или запретить повтор вовсе.

Примеры:

background-repeat: repeat; // повтор по обеим осям

background-repeat: repeat-x; // повтор только по оси x

background-repeat: repeat-y; // повтор только по оси y

background-repeat: no-repeat; // запрещает повтор Значение по умолчанию - repeat

background-position - указывает позицию фонового изображения относительно блока. Может определятся стандартными командами (left, right, top, bottom, center), пикселями или в процентном соотношении.

Примеры:

background-position: top left; // вверху слева

background-position: top center; // вверху по центру

background-position: top right; // вверху справа

background-position: left center; // по центру слева

background-position: center center; // по центру блока

background-position: right center; // по центру справа

background-position: left bottom; // внизу слева

background-position: center bottom; // внизу по центру

background-position: right bottom; // внизу справа

background-attachment - указывает браузеру прокручивать фоновое изображение вместе со страницей / блоком, или нет.

Примеры:

background-attachment: fixed; // фон не прокручивается

background-attachment: scroll; // фон прокручивается Значение по умолчанию - scroll