Свойства CSS "Цвет и фон" Урок 1-й. background - Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.
Пример:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>background</title>
<style type="text/css">
div {
height: 200px; /* Высота блока */
width: 200px; /* Ширина блока */
overflow: auto; /* Добавляем полосы прокрутки */
padding-left: 15px; /* Отступ от текста слева */
background: #0000ff /* Цвет фона */
url('sample.gif') /* Путь к фоновому изображению */
repeat-y; /* Повторять фон по вертикали */
}
</style>
</head>
<body>
<div>
<p>...</p>
</div>
</body>
</html>
Описание:
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.
Синтаксис:
background: background-attachment || background-color || background-image || background-position || background-repeat
background-attachment - Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-attachment</title>
<style type="text/css">
body {
background-image: url('images/sample.gif'); /* Путь к фоновому изображению */
background-attachment: fixed; /* Фиксируем фон веб-страницы */
}
</style>
</head>
<body>
<table>
<tr>
<td style="height:2000px">
</td>
</tr>
</table>
</body>
</html>
Описание:
Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Синтаксис:
background-attachment: fixed | scroll
background-color - Устанавливает фоновый цвет элемента.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-color</title>
<style type="text/css">
body {
background-color: #3366CC; /* Цвет фона веб-страницы */
}
h1 {
background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */
}
p {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: white; /* Цвет текста */
}
</style>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>
Описание:
Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.
Синтаксис:
background-color: цвет | transparent
Вот мы и прошли с вами 1-й урок свойств CSS по Цвету и фону... Смотрите 2-й урок по цвету и фону ниже...
Добавлено (14.01.2008, 04:21)
---------------------------------------------
Свойства CSS "Цвет и фон" Урок 2-й.
background-image - Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-image</title>
<style type="text/css">
body {
background-image: url('images/bg.gif'); /* Путь к фоновому изображению */
background-color: #fc0; /* Цвет фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
Описание:
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
Синтаксис:
background-image: url(путь к файлу) | none
background-position - Задает начальное положение фонового изображения, установленного с помощью параметра background-image.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-position</title>
<style type="text/css">
BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: no-repeat; /* Отменяем повторение фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
Описание:
Задает начальное положение фонового изображения, установленного с помощью параметра background-image
Синтаксис:
background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]
background-repeat - Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>background-repeat</title>
<style type="text/css">
BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: repeat-y; /* Повторяем фон по вертикали */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
Описание:
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Синтаксис:
background-repeat: no-repeat | repeat | repeat-x | repeat-y
color - Определяет цвет текста элемента.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>color</title>
<style type="text/css">
.letter {
color: red; /* Цвет символа */
font-size: 200%; /* Размер шрифта */
}
P {
color: RGB(49, 151, 116); /* Цвет текста */
}
</style>
</head>
<body>
<p><span class="letter">L</span>Hello World!</p>
<p>...</p>
</body>
</html>
Описание:
Определяет цвет текста элемента.
Синтаксис:
color: значение
Это пожалуй все о цвете и фоне в CSS... Если со мной нечего неслучится напишу ещё пару уроков о Свойствах CSS...
Good Luck! 
