Свойства background

Свойства background устанавливают характеристики фона элемента. В одной строке для этой опции можно записать до пяти характеристик одновременно. Это может быть цвет, фоновое изображение и другие параметры.

HTML
<div class="text"><
Фоновый рисунок<br />
повторяется по горизонтали
</div>
CSS
* {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background : #fff url(pgm-body.jpg) repeat-x;
}
.text {
margin-top: 22px;
margin-left: 20px;
font-size: 22px;
}
.text:first-letter {
font-size: 28px;
color: #f00;
}
background-color
Свойство background-color устанавливает характеристики цвет фона элементов. Параметры этого свойства можно указать несколькими способами:
Шестнадцатеричное значение
background-color: #777777;
или сокращённо
background-color: #777;
RGB
background-color : RGB (249, 201, 16);
Названия цветов
background-color : white;
background-color : black;
background-color : gray;
Параметр transparent
По умолчанию фон элемента свойства background установлен прозрачным, а в случае если требуется перекрыть ранее установленное предыдущее значение фона, свойству background задаётся параметр – «transparent».
background-color : transparent;
background-image
Свойство background-image создаёт условие для вывода изображения на фоне элемента.
Опции свойства background-image
background-image : url("/images/bg.png");
background-image : none;
Серый цвет фона страницы

HTML
<p>
Серый цвет фона страницы
</p>
CSS
* {
height: 100%;
margin: 0;
padding: 0;
background-color: #eaeaea;
font-family: Arial, Helvetica, sans-serif;
}
p{
line-height: 50px;
letter-spacing: 1px;
font-size: 26px;
margin-top: 40px;
margin-left: 30px;
}
background-attachment
Свойство background-attachment создаёт условие для реализации функции прокрутки фонового изображения, которое можно как зафиксировать параметром «fixed», так и сделать подвижным, задав параметр «scroll».
Параметры свойства background-attachment
background-attachment : fixed;
background-attachment : scroll;
background-position
Свойство background-position устанавливает позицию исходной картинки фонового изображения, выводимую свойством background-image.
Расположение в левом верхнем углу
background-position : top left;
background-position : 0% 0%;
Расположение по центру вверху
background-position : top;
background-position : center top;
background-position : 50% 0%;
Позиция в правом верхнем углу
background-position : right top;
background-position : 100% 0%;
Позиция по левому краю и по центру
background-position : left;
background-position : center left;
background-position : 0% 50%;
Расположение по центру
background-position : center;
background-position : 50% 50%;
Позиция по правому краю и по центру
background-position : right center;
background-position : 100% 50%;
Расположение в левом нижнем углу
background-position : bottom left;
background-position : 0% 100%;
Расположение по центру внизу
background-position : bottom;
background-position : bottom center;
background-position : 50% 100%;
Позиция в правом нижнем углу
background-position: bottom right;
background-position: 100% 100%;
background-repeat
Свойство background-repeat создаёт условие для повторяющегося изображения на фоне элемента, которое выдаёт свойство background-image.
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
Параметр «no-repeat» задаёт вывод фонового изображения без его повторений.
Параметр «repeat» выводит изображение, которое повторяется по горизонтали и вертикали.
Опция «repeat-x» создаёт условие для вывода рисунка, который повторяется только по горизонтали.
Опция «repeat-y» делает возможным вывод повторяющегося рисунка, только по вертикали.