В отличие от квадратного изображения размерами 50×50 пикселей, которое использовалось для создания текстурного фона, изображение «водяного знака»

должно иметь большие’размеры. Например, при необходимости использования в качестве «водяного знака» логотипа компании изображение логотипа должно

быть таким, каким оно должно выводиться на странице (см. рис. 4.18).

214 Глава 4. Каскадные списки стилей





Рис. 4.18. Web-страница с логотипом компании (лампочкой) в качестве «водяного знака»

Для помещения «водяного знака» в центр фона Web-страницы добавьте в спи- сок стилей следующее правило:

body {background-image:URL(images/LightBulb. gif) ;

background-repeat:no-repeat;

background-position:center;

background-attachment:fixed} . . ,

Как и в случае с текстурным фоном из предыдущего примера, свойство

background-image устанавливает имя файла графического изображения, которое будет использоваться в качестве «водяного знака». В приведенном выше примере Web-браузер будет выводить на экран изображение из файла LightBulb. gif. Если вы хотите поместить на страницу другое изображение, замените images/ LightBulb. gif относительным адресом и именем файла изображения своего «во —

дяного знака». Значение no-repeat свойства background-repeat указывает Web — браузеру выводить на страницу только одну копию изображения. Свойство background-position используется для задания положения изображения на

странице, а значение fixed свойства background-attachment позволяет удержи — вать «водяной знак» во время пролистывания содержимого страницы.

Как вы, наверное, догадываетесь, «водяной знак» можно размещать не только

в центре Web-страницы. Синтаксис каскадных списков стилей предоставляет три метода указания местоположения «водяного знака»: с помощью ключевого слова,

с использованием единиц длины и процентных значений. Для позиционирова — ния «водяного знака» с помощью ключевого слова применяются значения top, bottom, left, righ t и (как было продемонстрировано в примере) center. Таким

образом, для помещения «водяного знака» (фактически любого графического

изображения) в нижний левый угол фона Web-страницы необходимо следующим —

образом установить СВОЙСТВО background-position:



background-position:bottom right;



Использование единиц длины для позиционирования «водяного знака» пре —

доставляет четкий контроль над его положением на странице. Для указания рас — стояния «водяного знака» от верхнего левого угла страницы можно воспользо —

Глава 4. Каскадные списки стилей. 21 5





ваться любыми единицами длины, имеющимися в каскадных списках стилей.

Например, для вывода «водяного знака» на экран на расстоянии 70 пикселей от левого края и на расстоянии 100 пикселей от верхнего края страницы можно

ВОСПОЛЬЗОВатЬСЯ СЛедуЮЩИМ Объявлением СВОЙСТВа background-position. *



background-position:7Ор х ЮОрх;

Обратите внимание, что сначала указывается расстояние от левого, а затем от верхнего края страницы.

Процентные значения, используемые для позиционирования фоновых изоб —

ражений, аналогичны по своей функции единицам длины. Тем не менее, вместо точного задания положения верхнего левого угла изображения, указывается рас — стояние между изображениями и краями страницы в процентах от соответствую- щих размеров окна Web-браузера. Например, для помещения изображения на расстоянии 25% ширины окна от левого края страницы и 50% высоты окна от верх- него края страницы объявите свойство background-position следующим образом:



background-position:25% 50%



Обратите внимание, что при изменении размера окна браузера положение «водяного знака» будет меняться с целью сохранения постоянных процентных значений положения изображения на Web-странице.



Плавающие изображения и текст

На большинстве Web-страницы присутствуют как текст, так и изображения. Несмотря на то что старая поговорка о том, что одна картина может стоить ты — сячи слов, справедлива и сейчас, тем не менее, в сети Web изображения пока еще не заменили слов. Фактически страница, содержащая только изображения,