Параметры фона
Фон можно определять как для всей html-страницы, так и для отдельных ее элементов: текста, таблицы, ячеек таблицы и проч.
Цвет фона в CSS определяет атрибут стиля background-color:
background-color: <color>
Цвет можно задавать при помощи RGB-кода или имени. Значение transparent задает прозрачный фон.
По умолчанию фон у элементов html-страницы отсутствует; фон html-страницы определяется браузером.
При помощи атрибута стиля background-image в качестве фона можно задавать графическое (фоновое) изображение:
background-image: url("<адрес изображения>")
Значение none убирает графический фон.
Можно задавать цвет фона и фоновое изображение одновременно, при этом "картинка" накладывается поверх обычного фона. Если фоновое изображение содержит прозрачные области, то через них будет просвечиваться цвет фона.
Если фоновое изображение меньше, элемента html-страницы, для которого задано, браузер будет повторять "картинку" фона пока не заполнит пространство всего элемента. Параметры такого повторения изображения задаются при помощи атрибута стиля background-repeat:
Значения background-repeat:
- no-repeat - фоновое изображение не повторяется, часть фона остается пустой;
- repeat - фоновое изображение повторяется по горизонтали и вертикали (значение по умолчанию);
- repeat-x - фоновое изображение повторяется только по горизонтали;
- repeat-y - фоновое изображение повторяется только по вертикали.
ПРИМЕР:
BODY {
background-color: #00FF00;
background-image: url("/img/logo.gif");
background-repeat: no-repeat
}
|
background-position - определяет позицию фонового изображения относительно элемента html-страницы:
background-position: <horizontal position> [<vertical position>]
Формат для горизонтальной позиции:
<n>|left|right|center
- n - числовое значение, которое указывает местоположение фонового изображения относительно элемента html-страницы по горизонтали;
- left - фоновое изображение располагается у левого края элемента html-страницы (значение по умолчанию);
- right - у правого края;
- center - по центру.
Формат для вертикальной позиции:
<n>|top|bottom|center
- n - числовое значение, которое указывает местоположение фонового изображения относительно элемента html-страницы по вертикали;
- top - фоновое изображение располагается у верхнего края элемента html-страницы (значение по умолчанию);
- bottom - у нижнего края;
- center - по центру.
В случае, если задана только горизонтальная позиция фонового изображения, то вертикальная позиция принимается равной center.
ПРИМЕР:
.tbl {background-position: 5px center}
|
Поведение фонового изображения при прокрутке html-страницы определяется атрибутом стиля background-attachment.
Значения background-attachment:
- scroll - фоновое изображение прокручивается вместе с html-страницей;
- fixed - фоновое изображение фиксируется на месте.
