Повторение фонового изображения
При необходимости заполнением экрана изображением можно управлять, направляя его в ту или иную сторону, по горизонтали или вертикали либо разместить одно изображение локально, не повторяя. Достигается это добавлением в конструкцию задания фонового изображения команд. Для того чтобы фоновое изображение повторялось только по горизонтали, следует записать:
body {background:url(coco.gif) repeat-x}
Результат исполнения кода на рисунке 7.4.
Рисунок 7.4 - Пример горизонтально расположенного фонового изображения
Фиксация фонового изображения
Если содержимое Web-страницы или фрейма не помещается в рамках окна браузера или выделенного для него пространства, активизируется линейка прокрутки. В этом случае автор Web-страницы может указать, будет ли фоновое изображение перемещаться по мере передвижения бегунка линейки прокрутки или останется зафиксированным в одном и том же положении. В последней ситуации может быть получен несколько неожиданный эффект: прокручиваемый текст движется относительно фонового изображения. Для создания такого эффекта в рассматриваемую выше конструкцию необходимо добавить команду fixed:
body {background:url(coco.gif) fixed}
По умолчанию применяется команда scroll, в соответствии с которой фоновое изображение прокручивается вместе с текстом.
Позиционирование фонового изображения
Если изображение, применяемое как фоновое, никак не повторяется, его можно особым образом позиционировать. Синтаксис такого позиционирования является вариантом синтаксиса назначения фонового изображения, но с добавлением координат или указанием методов позиционирования:
{background: url(имя_файла) no-repeat X Y}
Переменные X и Y здесь соответствуют указанию метода позиционирования или численному значению позиции соответственно по горизонтали и по вертикали.
При численных методах задания координат позиционирования за точку отсчета принимается левый верхний угол страницы или ячейки таблицы, в которой изображение позиционируется. Так, при задании позиции в привычных единицах измерения, например в сантиметрах, в случае, когда указано
{background: url(coco.gif) no-repeat 2cm 3cm},
левый верхний угол изображения разместится в двух сантиметрах к низу и в трех сантиметрах вправо от левого верхнего угла окна браузера или ячейки страницы. Если координаты задаются в процентах от высоты и ширины окна браузера или ячейки таблицы, то позиционируется точка, соответствующая тем же величинам, но уже относящимся к самому изображению. Например, если при расположении изображения в ячейке таблицы указано
{background: url(coco.gif) no-repeat 0% 0%},
то это означает, что верхний левый угол изображения находится в левом верхнем углу страницы. Если же указано
{background: url(coco.gif) no-repeat 100% 100%},
то это означает, что правый нижний угол изображения расположен в правом нижнем углу оформляемой страницы. Таким же образом определяются и промежуточные положения: если позиция изображения на странице задана парой 20 и 80%, как в примере:
<html> <head> <title> Пример </title><head>
<table height=200 border=1
style="background:url(coco.gif) no-repeat 20% 80%">
<tr>
<td>Плюшевый крокодил.
</table></html>
то позиционируется точка, соответствующая 20% ширины изображения и 80% его высоты, считая от его левого верхнего края.
Необходимо отметить, что все методы позиционирования могут применяться совместно, т. е. позицию изображения можно задать и как
{background: url(coco.gif) no-repeat 40% 3cm}
8. Группировка значений, задающих фон
Практически все рассмотренные способы задания фона или фонового изображения можно в случае необходимости применить одновременно.
Пример:
<html> <head> <title> Пример </title> <head>
<table
height=150
border=1
style="background:url(coco.gif) blue repeat-x -10px center ">
<tr>
<td>Плюшевый крокодил.
</table> </html>
Результат исполнения кода на рисунке 7.5.
Рисунок 7.5 - Пример группировки значений задающих фон
Контрольные вопросы.
1. Какое свойство используется для назначения стиля списков? Перечислите значения свойства для маркированных и нумерованных списков.
2. Какое свойство используется при позиционировании пунктов списка?
3. Какое свойство используется для назначения стиля для списков с изображением в виде маркера?
4. Какое свойство используется для назначения фонового изображения? Перечислите возможные значения (позиционирование фонового изображения, растяжение по горизонтали, фиксированное фоновое изображение).
5. Приведите пример группировки значений, задающих фон.