voliuf.narod.ru

3.Параметры CSS для фона

Параметры CSS для фона определяют фоновые эффекты элемента.

Примеры

Данный пример показывает, как задать фоновый цвет элемента.
<html>
<head>

<style type="text/css">
ul {background-color: rgb(200,10,200)}
ol {background-color: #00FFFF}
li {background-color: transparent}
p {background-color: blue}
</style>
</head>

<body>

<ul>
<li>this is ul</li>
</ul>
<ol>
<li>this is ol</li>
</ol>
<p>This is a paragraph</p>

</body>
</html>
Данный пример показывает, как задать в качестве фона изображение.
<html>
<head>

<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg)
}
</style>

</head>

<body>
В документе в качестве фона использовано изображение
</body>

</html>
Данный пример показывает, как использовать повторяющееся фоновое изображение.
<html>
<head>

<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat
}
</style>

</head>

<body>
В документе в качестве фона использовано повторяющееся изображение
</body>
</html>
Данный пример показывает, как использовать повторяющееся только по вертикали фоновое изображение.
<html>
<head>

<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat-y
}
</style>

</head>

<body>
В документе в качестве фона использовано повторяющееся изображение,
которое размножается только вертикально
</body>
</html>
Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.
<html>
<head>

<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat-x
}
</style>

</head>

<body>
В документе в качестве фона использовано повторяющееся изображение,
которое размножается только горизонтально.
</body>
</html>
Данный пример показывает, как разместить на странице фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
repeat;
background-position:
bottom;
}
</style>
</head>

<body>
</body>
</html>
Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>

<body>
Определено фиксированное фоновое изображение<br>
Определено фиксированное фоновое изображение<br>
Определено фиксированное фоновое изображение<br>
</body>

</html>
Данный пример показывает, как задать прокручивающееся фоновое изображение, т.е. изображение, которое будет прокручиваться вместе с документом.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
no-repeat;
background-attachment:
scroll
}
</style>
</head>

<body>
Определено прокручивающееся фоновое изображение<br>
Определено прокручивающееся фоновое изображение<br>
Определено прокручивающееся фоновое изображение<br>
</body>

</html>
Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
<html>
<head>
<style type="text/css">
body
{
background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center;
}
</style>
</head>

<body>
Это документ, для которого свойства фона заданы в одном объявлении<br>
Это документ, для которого свойства фона заданы в одном объявлении<br>
Это документ, для которого свойства фона заданы в одном объявлении<br>
</body>

</html>

Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.

Параметры фона в CSS: подробное рассмотрение

Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.

Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).

Параметр	Описание	Значения	IE	F	N	W3C
background	Служит для задания всех параметров фона в одном объявлении	background-color background-image background-repeat background-attachment background-position	4	1	6	1*
background-attachment	Задает для изображения фиксированное расположение или перемещающееся вместе с остальной страницей	scroll fixed	4	1	6	1
background-color	Задает цвет фона элемента	color-rgb color-hex color-name transparent	4	1	4	1
background-image	Задает в качестве фона изображение	url none	4	1	4	1
background-position	Задает начальное положение фонового изображения	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos	4	1	6	1
background-repeat	Определяет, будет ли и каким образом будет повторяться фоновое изображение	repeat repeat-x repeat-y no-repeat	4	1	4	1

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).

Параметр 'background'

Этот параметр предназначен для задания всех свойств фона в одном объявлении.

Наследование: нет.

Примеры:

body
{
background: url(picture.gif)
}

body
{
background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll
}

body
{
background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-x bottom
}

Может принимать следующие значения:

Значение

Описание

background-color

background-image

background-repeat

background-attachment

background-position

В этом объявлении можно задать от одного до пяти свойств фона

Рассмотрим их подробнее.

Параметр 'background-attachment'

Этот параметр определяет, будет ли фоновое изображение зафиксировано в определенном месте или будет перемещаться вместе со всей страницей.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
Scroll	Фоновое изображение перемещается, когда перемещается страница
Fixed	Фоновое изображение не перемещается, когда перемещается страница

Пример:

body
{
background-attachment: fixed;
background-repeat: repeat
}

Параметр 'background-color'

Этот параметр задает фоновый цвет элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
color	Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000)
transparent	Фоновый цвет является прозрачным

Пример:

h1
{
background-color: gray;
font-family: arial
}

Параметр 'background-image'

Данный параметр задает изображение в качестве фона.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
url	Путь доступа к изображению
none	Фонового изображения нет

Пример:

body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: repeat;
background-attachment: fixed
}

В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.

Параметр 'background-position'

Этот параметр задает начальное положение фонового изображения.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
top left top center top right center left center center center right bottom left bottom center bottom right	Если определить только одно ключевое слово, то вторым значением подразумевается "center"
x-% y-%	Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%.
x-pos y-pos	Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты.

Пример:

body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-position: right top;
background-attachment: fixed
}

body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
background-attachment: fixed
}

Параметр 'background-repeat'

Этот параметр определяет, каким образом будет повторяться фоновое изображение.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
repeat	Фоновое изображение будет повторяться по вертикали и по горизонтали
repeat-x	Фоновое изображение будет повторяться по горизонтали
repeat-y	Фоновое изображение будет повторяться по вертикали
no-repeat	Фоновое изображение будет выведено только один раз

Пример:

body
{
background-image: url(http://www.intuit.ru/departament/image.gif);
background-repeat: repeat;
background-attachment: fixed
}

источник: http://www.INTUIT.ru