background

Описание
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

Синтаксис
background: background-attachment || background-color || background-image || background-position || background-repeat

Аргументы
Любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.

Пример

DIV {
background: #fc0 url (images/hand.png) repeat-y; /* Цвет фона,
путь к фоновому изображению и
повторять фон по вертикали */
}

background-color

Описание
Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.

Синтаксис
background-color: цвет | transparent

Аргументы
Цвет можно задавать тремя способами.

Пример
BODY {
background-color: #3366CC; /* Цвет фона веб-страницы */
}
H1 {
background-color: RGB (249, 201, 16); /* Цвет фона под заголовком */
}
P {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: white; /* Цвет текста */
}

background-image

Описание
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.

Синтаксис
background-image: url (путь к файлу) | none

Аргументы
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url (). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. Когда фоновое изображение не требуется, аргумент может принимать значение none.

Пример
BODY {
background-image: url (images/bg.jpg); /* Путь к фоновому изображению */
}

background-repeat

Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y

Аргументы
no-repeat
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу).
repeat
Фоновое изображение повторяется по горизонтали и вертикали.
repeat-x
Фоновый рисунок повторяется только по горизонтали
repeat-y
Фоновый рисунок повторяется только по вертикали

Пример
BODY {
background-image: url (images/gradient.png); /* Путь к фоновому рисунку */
background-repeat: repeat-x; /* Повторяем фон по горизонтали */
}

background-position

Описание
Задает начальное положение фонового изображения, установленного с помощью параметра background-image.

Синтаксис
background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]

Аргументы
У этого параметра два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

Пример
BODY {
background-image: url ('images/mybg.png'); /* Путь к фоновому рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: no-repeat; /* Отменяем повторение фона */
}

background-attachment

Описание
Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

Синтаксис
background-attachment: fixed | scroll

Аргументы
fixed
Делает фоновое изображение элемента неподвижным.
scroll
Позволяет перемещаться фону вместе с содержимым.

Пример
BODY {
background-image: url ('images/sample.gif'); /* Путь к фоновому изображению */
background-attachment: fixed; /* Фиксируем фон веб-страницы */
}

opacity

Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Синтаксис
opacity: значение

Аргументы
В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Пример
IMG.semi {
opacity: 0.5; /* Полупрозрачность элемента */
}

Возможно, Вам будет полезна эта информация:

1. Работа над списками
2. Позиционирование в CSS
3. Оформляем рамки