В этом уроке мы рассмотрим специальные свойства CSS для работы с цветом и фоном.

Цвет переднего плана – свойство color

С помощью CSS-свойства color можно задать цвет переднего плана для элемента. Например, для того чтобы сделать абзацы черными, а заголовки первого уровня красными, то нужно написать так:

p{color:#000000}
h1{color:red}

Фоновый цвет – свойство background-color

С помощью CSS-свойства background-color можно задать фоновый цвет для всей веб-страницы или же для какого-нибудь отдельного элемента. Ниже приведен пример установки синего фонового цвета для всех элементов списка (тегов <li>):

li{background-color:blue}

Изображение в качестве фона – свойство background-image

Кроме фонового цвета существует возможность использовать фоновое изображение (графический файл в качестве фона). В следующем примере использовано изображение fon.jpg в качестве фонового изображения для всей страницы:

body{
  background-image: url(fon.jpg);
}

Повторение фонового изображения – свойство background-repeat

С помощью css-свойства background-repeat можно сделать так, чтобы фоновое изображение повторялось по горизонтали или по вертикали или вообще не повторялось.
Если использовать значение repeat-x, то изображение будет повторятся по горизонтали. Если использовать значение repeat-y, то изображение будет повторятся по вертикали.
Ниже приведен пример использования значения repeat, что говорит о том, что изображение будет повторятся и по горизонтали и по вертикали:

body{
  background-image: url(fon.jpg);
  background-repeat: repeat
}

Блокировка фонового изображения – свойство background-attachment

С помощью css-свойства background-attachment можно заблокировать фоновое изображение или разблокировать его.
Под «блокированием» понимается невозможность изображения прокручиватся вместе с содержимым страницы. Поэтому, если изображение разблокировано, значит оно может прокручиватся вместе с содержимым страницы.

В следующем примере фоновое изображение fon.jpg разблокировано (свойство background-attachment приняло значение scroll):

body{
  background-image: url(fon.jpg);
  background-repeat: repeat;
  background-attachment: scroll
}

Позиция фонового изображения – свойство background-position

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

В следующем примере для свойства  background-position использовано значение “center center”. Это означает, что фоновое изображение располагается по центру окна просмотра в браузере:

body{
  background-image: url(fon.jpg);
  background-attachment: scroll;
  background-position:center center;
}