Фоновые цвета и изображения онлайн урок.


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

Определение цвета фона. Для этого достаточно указать в качестве значения этого свойства цвет в формате RGB или в виде ключевого слова, например:


.foo {
background: yellow;
}

.bar {
background: #d7d7d7;
}


Определение изображения в качестве фона. Для этого необходимо указать путь к изображению. Этот пусть может быть как абсолютным, так и относительным. Используется специальная функция url, в которую этот путь подставляется:


.bar {
background: url('images/bg.png');
}


При этом часто необходимо задать параметры фона, такие, как повторения рисунка по горизонтали и/или вертикали, отсутствие повторений, определения сдвига рисунка как фонового и т.п. Рассмотрим основные из них.

  • repeat-x - повторение по горизонтали

  • repeat-y - повторение по вертикали

  • no-repeat - без повторений


Например, по умолчанию повторения выставлены и по вертикали, и по горизонтали



Для того, чтобы установить повторения только по горизонтали необходимо записать


.bar {
border:5px solid black;
width:200px;
height:200px;
background: url('../img/stripe.png') repeat-x;
}


Если без повторений:


.bar {
border:5px solid black;
width:200px;
height:200px;
background: url('../img/stripe.png') no-repeat;
}


Также, можно задать сдвиг изображения на фоне при помощи двух значений в единицах измерения или процентах, например



Проверьте свои знания
Задать фоновый цвет <body> как #E5E5E5. Задать белый фон container. Задать фон header как #BCBE97, фон footer как #F2F2F2.