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

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

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

Параметр	Описание	Значения	IE	F	N	W3C
background	Служит для задания всех параметров фона в одном объявлении	backgroundcolor	4	1	6	1*
		backgroundimage
		backgroundrepeat
		backgroundattachment
		backgroundposition
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-xbottom
}

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

Значение	Описание
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:righttop;
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
}

Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять текст, делать отступ для первой строки текста и т.д.

Поддержка браузеров: Internet Explorer, Firefox, Netscape.

Параметр	Описание	Значения	IE	F	N	W3C
color	Задает цвет текста	Color	3	1	4	1
direction	Задает направление текста	rtl	6	1	6	2
letter-spacing	Увеличивает или уменьшает интервал между символами	length	4	1	6	1
text-align	Выравнивает текст в элементе	justify	4	1	4	1
textdecoration	Дополнительное оформление текста	blink	4	1	4	1
text-indent	Делает отступ для первой строки текста элемент	%	4	1	4	1
text-shadow		length
text-transform	Управляет символами элемент	lowercase	4	1	4	1
unicode-bidi		bidi-	5			2
white-space	Задает способ обращения с пробелами внутри элемента	nowrap	5	1	4	1
word-spacing	Увеличивает или уменьшает пробел между словами	length	6	1	6	1

Примеры

Wiki-учебник по веб-технологиям: CSS/ПараметрыФона ...

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