Свойства 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: #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  :  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 создаёт условие для реализации функции прокрутки фонового изображения, которое можно как зафиксировать параметром «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-image.

background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;

Параметр «no-repeat» задаёт вывод фонового изображения без его повторений.

Параметр «repeat» выводит изображение, которое повторяется по горизонтали и вертикали.

Опция «repeat-x» создаёт условие для вывода рисунка, который повторяется только по горизонтали.

Опция «repeat-y» делает возможным вывод повторяющегося рисунка, только по вертикали.