и другого 
содержимого Web-страннцы. Тем HI- менее, "водяной знак" выводится на 
страницу только одни раз н не копируется с целью заполнения всего фона 
Web-страннцы. Более того, при про шамкании содержимого страницы в 
окне браузера желательно, чтобы "водяной знак" оставался на месте. 
CSS имеет свойство background, которое позволяет устанавливать 
"водяные знаки" на фоне Web сран ним. 
РИС. 4.18. Web-страница с логотипом компании (лампочкой) в качестве "водяного 
знака" 
Рис. 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, right и (как было продемонстрировано в примере) center. Таким 
образом, для помещения "водяного знака" (фактически любого графического 
изображения) в нижний левый угол фона Web-страницы необходимо следующим- 
образом установить СВОЙСТВО background-position: 
background-position:bottom right; 
Использование единиц длины для позиционирования "водяного знака" пре- 
доставляет четкий контроль над его положением на странице. Для указания рас- 
стояния "водяного знака" от верхнего левого угла страницы можно воспользо-

Глава 4. Каскадные списки стилей 
ваться любыми единицами длины, имеющимися в каскадных списках стилей. 
Например, для вывода "водяного знака" на экран на расстоянии 70 пикселей от 
левого края и на расстоянии 100 пикселей от верхнего края страницы можно 
ВОСПОЛЬЗОВатЬСЯ СЛедуЮЩИМ Объявлением СВОЙСТВа background-position.* 
background-position:7Орх ЮОрх; 
Обратите внимание, что сначала указывается расстояние от левого, а затем от 
верхнего края страницы. 
Процентные значения, используемые для позиционирования фоновых изоб- 
ражений, аналогичны по своей функции единицам длины. Тем не менее, вместо 
точного задания положения верхнего левого угла изображения, указывается рас- 
стояние между изображениями и краями страницы в процентах от соответствую- 
щих размеров окна Web-браузера. Например, для помещения изображения на 
расстоянии 25% ширины окна от левого края страницы и 50% высоты окна от верх- 
него края страницы объявите свойство background-position следующим образом: 
background-position:25% 50% 
Обратите внимание, что при изменении размера окна браузера положение 
"водяного знака" будет меняться с целью сохранения постоянных процентных 
значений положения изображения на Web-странице. 
Плавающие изображения и текст 
На большинстве Web-страницы присутствуют как текст, так и изображения. 
Несмотря на то что старая поговорка о том, что одна картина может стоить ты- 
сячи слов, справедлива и сейчас, тем не менее, в сети Web изображения пока 
еще не заменили слов. Фактически страница, содержащая только изображения, 
для посетителя ничем не лучше страницы, содержащей только текст. Поэтому 
при создании Web-сайта большая часть работы по расположению элементов на 
странице будет связна с организацией обтекания текста вокруг изображений. В 
прошлом дизайнеры имели в своем распоряжении только атрибут align, кото- 
рый при использовании его с дескриптором  заставлял Web-браузер обте- 
кать изображение текстом слева или справа. Теперь появилось свойство float 
каскадных списков стилей, которое позволяет задавать обтекание текстом не 
только 
изображений, но, как показано на рис. 4.19, и других элементов Web-страницы. 
ПРАКТИКУМ 
При применении свойства float каскадных списков стилей к элементу вы изы- 
маете элемент из нормального потока и делаете из него "плавающий" элемент, 
который будет находиться слева или справа от эл