Использование изображений

Прежде всего, чтобы сделать изображение фоном, используем свойство background-image. Применяемое по умолчанию значение none приводит именно к тому, чего и можно ожидать: на заднем плане нет никакого изображения. Для того чтобы фоновое изображение было, необходимо присвоить этому свойству значение URL:

body {background-image: url(bg23.gif);}

Благодаря применяемым по умолчанию значениям других свойств фона, это приведет к тому, что изображение bg23.gif будет размещено на заднем плане документа. Однако, как вскоре выяснится, мозаичное расположение не является единственно возможным вариантом. Как правило, имеет смысл задать вместе с фоновым изображением и цвет фона. Фоновые изображения можно применять к любым блочным или строковым элементам, и в основном, конечно, фон применяется к элементам body, но останавливаться на этом не обязательно:

p.starry {background-image: url(http://www.site.web/pix/stars.gif);
color: white;}
a.grid {background-image: url(smallgrid.gif);}

It's the end of autumn, which means the stars will be
brighter than ever! Join us for a
fabulous evening of planets, stars, nebulae, and more...

Фон применяется лишь к одному абзацу и ни к какой другой части документа.


Можно пойти еще дальше, например разместить фоновые изображения в строковых элементах, таких как гиперссылки. Конечно, если вы хотите увидеть мозаичный шаблон, изображение должно быть небольшим. В конце концов, отдельные буквы тоже не так уж велики!

Существует ряд способов применения специальных фоновых изображений. Можно разместить изображение на заднем плане элементов strong, чтобы еще больше выделить их. Или заполнить фон заголовков волнистыми разводами или маленькими точками. Можно даже заполнить ячейки таблиц шаблонами, чтобы они выделялись на странице.

td.nav {background-image: url(darkgrid.gif);}

Есть даже теоретическая возможность применить изображения к фону замещаемых элементов, таких как textarea (область текста) и списки select, хотя не каждый агент пользователя способен обработать такие стили. Так же как и background-color, свойство background-image не наследуется – кстати, не наследуется ни одно из свойств фона. Помните также, что при задании URL фонового изображения он попадает под общие ограничения и предостережения использования значений url: относительный URL интерпретируется относительно таблицы стилей, но Navigator 4.x делает это неправильно, поэтому легче задавать абсолютные URL.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Еще раз о повторении в определенном направлении
Замещение атрибутов
Значения, заданные в единицах измерения длины

Вернуться в раздел: CSS / 9. Цвета и фон