Для управления фоном элементов используются:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

Определяет цвет фона элемента. Например, цвет фона div’а можно задать так:

<div style="background-color: #DDD;">Пример 1.</div>

background color может быть задано спомощью:

• name – имя цвета, например, «green»
• RGB – an RGB value, like «rgb(0,255,0)»
• Hex – a hex value, like «#00ff00″

Background Image

background-image задает изображение, которое будет фоновым рисунком елемента. По-умолчанию изображение будет повторяться и покроет весь елемент.
Например, фоновое изображение для всей странички может быть задано так:

body { background-image:url('image.gif')}

Не стоит задавать фоновым рисунком такое изображение, при котором текст на странице не будет удобочитаемым.

Повтор фонового изображения по вертикали или по горизонтали .

По-умолчанию изображанеие, заданное с помощью background-image, повторяется в обоих направлениях (по вертикали и по горизонтали). Иногда бывает нужно, что бы изображение повторялось только по вертикали или по горизонтали.

/* Повторение по вертикали */
body {
background-image:url('image.png');
background-repeat:repeat-y;
}
/* Повторение по горизонтали */
body {
background-image:url('image.png');
background-repeat:repeat-x;
}

Если нужно сделать так, что бы фоновон изображение не повторялось ни по вериикали ни по горизонтали, то нужно использовать no-repeat:

body {
background-image:url('image.png');
background-repeat:no-repeat;
}

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

Если нам надо задать положение фонового изображения, то нужно использовать background-position. Например, разместить его слева:

body {
background-image:url('image.png');
background-repeat:no-repeat;
background-position:top left;
}

Возможные значения background-posotion:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x% y%
• xpos ypos
• inherit

css