Очень важным моментом в CSS является цвет и фон.

Цвет в CSS указывается так же, как и в html, с помощью значения (например #f9f9f5) или названия цвета (yellow, grey, green).

Как использовать цвета в CSS

Содержание
Основными свойствами CSS, определяющими цвет текста, цвет фона и расположение фоновых рисунков, являются:

Теперь о каждом из них подробней:


color

Обозначает основной цвет определенного элемента:

h1
{color: yellow; }
h2
{color: grey; }
p
{color: blue; }

В итоге на сайте заголовки <h1> будут желтого цвета, заголовки <h2> серого, а текст <p> будет синим.


background-color

Обозначает цвет фона определённых элементов (заголовки, параграфы, ссылки, ячейка таблиц и т.д.)
К примеру, если надо изменить цвет фона всего документа, следует задать данное свойство элементу BODY.

body
{background-color: white; }
h1
{color: red; background-color: yellow; }

Цвет фона страницы будет белым а цвет текста в заголовке <h1> будет синим на желтом фоне.


backgroud-image

Необходим для заливки фона с помощью изображения. Для этого используется путь (URL) к изображению.

body
{background-color: F7F7F7;
bаckgroud-imagе: url('/kartinka.jpg'); }
h2
{color: FFFFFF; background-color: black; }
В данном случае изображением для фона является файл kartinka.jpg. Важное, что следует запомнить: значение url('kartinka.jpg') всегда пишут без пробела! Если на сайте файл изображения расположен в папке images - значение будет таким url('images/kartinka.jpg')

background-repeat

С помощью свойства background-repeat  можно добавить небольшой фрагмент изображения который заполнить весь фон. Это происходит за счет повторения фрагмента изображения начиная с верхнего левого угла по вертикали и горизонтали. В итоге получается полноценный фон.
Существует всего четыре значения:
background-repeat: repeat ; повторение по горизонтали и вертикали
background-repeat: repeat-x ; повторение по горизонтали
background-repeat: repeat-y ; повторение по вертикали
background-repeat: no-repeat ; не повторять

Например:

body
{background-image: url('kartinka.jpg') ;
background-repeat: repeat-y; }

Изображение будет повторятся по горизонтали во всю высоту окна.


background-attachment

При наличии фонового изображения определяет, будет ли оно прокручиваться вместе с содержимым страницы. Бывают два значения:
scroll - фон прокручивается вместе с содержимым страницы;
fixed - фон неподвижен, прокручивается содержимое страницы.

Пример неподвижного фона:

body
{background-image : url('kartinka.jpg') ;
background-repeat: no-repeat;
background-attachment: fixed ; }

Достаточно поменять значение  fixed на scroll, и фон станет подвижным. Вообще, если совсем не указывать это значение, то фон будет прокручиваться вместе с содержимым в соответствии с scroll.


background-position

Необходим для определения позиций фонового изображения. Значения могут быть в процентах, пикселях или с помощью ключевых слов. Отсчет начинается с левого верхнего угла страницы, где изображение расположено по умолчанию. Сначала задаётся координата по оси Х, потом по оси Y. На рисунке приведены примеры позиционирования (точка вместо изображения, а под ней - примерные координаты):

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

Также положение можно задать такими словами:
left - лево, right - право, center - центр, top - верх, bottom - низ 

Позиции background

Пример позиций с помощью слов:

body
{background-image : url('images/kartinka.jpg') ;
background-repeat: no-repeat;
background-position: center left ; }

Пример в пикселях:

body
{background-image : url('images/kartinka.jpg') ;
background-repeat: no-repeat;
background-position: 240px 30px; }

Пример в процентах:

body {background-image : url('images/kartinka.jpg') ;
background-repeat: no-repeat;
background-position: 40% 20%; }

background

Можно использовать для сокращения записей значений всех ранее перечисленных выше свойств.
Важно соблюдать такую последовательность:

1 - background-color
2 - background-image
3 - background-repeat
4 - background-attachment
5 - background-position

Например, все это:

body
{background-color: F4F4F4  ;
background-image : url('kartinka.jpg') ;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}

Можно сократить таким образом:

body
{background: #F4F4F4 url('kartinka.jpg') no-repeat scroll top left ; }

Значения свойств записываются через пробел. Если какое то из значений пропустить, оно будет считаться по умолчанию.

Следующая - Шрифты в CSS

Предыдущая -Как работает CSS. Создание и подключение таблиц