Свойство BACKGROUND
Рассмотрим полный пример задания фона для страницы:
BODY
{
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
|
Фоновое изображение теперь будет закреплено по центру экрана, не будет
повторяться ни в одном из направлений и не будет прокручиваться вместе с
текстом страницы.
В CSS существует понятие стенографического свойства, позволяющего
упрощенно записывать правила, относящиеся к заданию стилей для одного
элемента, в данном случае для фонового изображения. Свойство background является стенографическим свойством для задания значений свойств: background-image, background-repeat, background-attachment и background-position. Таким образом, показанный выше пример можно переписать так:
|
BODY {
background: url(images/bg.gif) no-repeat fixed 50% 50% }
В сокращенной форме записи background значения всех свойств
разделяются пробелами, а порядок указания значений произвольный. Это же
правило можно записать и так:
BODY {
background: no-repeat url(images/bg.gif) 50% 50% fixed }
|
Вот мы и познакомились со свойствами цвета и фона, и вы знаете, как с
помощью CSS можно задать варианты повторения фона и позиционировать
фоновое изображение. Краткое описание всех этих свойств приведено в
таблице:
|
Свойства Цвета и Фона в CSS
|
| Свойство |
Описание |
Пример |
| color |
Назначает цвет элемента |
STRONG {color:red;} |
| background-color |
Назначает цвет фона элемента |
Н4 {background-color: silver;} |
| background-images |
Определяет URL фонового изображения |
BODY {background-images: url(bg.gif);} |
| background-repeat |
Задает стиль повторения фонового изображения
repeat | repeat-x | repeat-y | no-repeat |
BODY {background-repeat: no-repeat;} |
| background-attachment |
Устанавливает возможность прокрутки фонового изображения вместе с элементом
scroll|fixed |
BODY {background-attachment: scroll;} |
| background-repeat |
Задает стиль повторения фонового изображения
repeat | repeat-x | repeat-y | no-repeat |
BODY {background-repeat: no-repeat;} |
| background-position |
Устанавливает начальную позицию фонового изображения в процентах, абсолютных величинах или с помощью ключевых слов
top center | bottom right и т.д. |
BODY {background-position: top center;} |
| background |
Сокращенная запись определяет свойства фона в любом порядке |
P { background: url("chess.png") gray 50% repeat fixed } |
|