Управление фоном - один из самых важных аспектов Web-дизайна.
Свойство background-color
Цвет фона элемента задаётся значением свойства background-color.
Естественно его значение должно быть равно какому-либо цвету. Например:
<body style="background-color: lightblue;">
Ничего сложного в понимании этого нет, однако обращу ваше внимание, что фон можно задать любому элементу. Например:
<body style="background-color: lightblue;">
<h4 style="background-color: green;">Пример фона заголовка
</h4>
<p style="background-color: magenta;">
Пример фона параграфа. Пример фона параграфа. Пример фона
параграфа. Пример фона параграфа. Пример фона параграфа.
Пример фона параграфа. Пример фона параграфа. Пример фона
параграфа. Пример фона параграфа. </p> </body>
Cвойство background-image
Кроме цвета фона также очень легко и изящно задаётся фоновый рисунок. Для этого используется свойство background-image, значение которого равно адресу фоновой картинки. Примером может послужить следующий код:
<body style="background-image: url(./image/fon.gif);">
При использовании фоновой картинки не стоит забывать про цвет фона. Для загрузки фоновой картинки в окно броузера необходимо некоторое время, причём большее чем для формирования цвета фона, заданного через свойство background-color. Поэтому прежде чем загрузится фоновый рисунок, ваша страница окажется на том фоне, который принудительно выставил себе пользователь через настройки MSIexplorer. Для того, чтобы избежать такой ситуации задавайте цвет фона для вашей страницы совпадающий по общей цветовой гамме вашего фонового рисунка. Пример задания такого фона для броузера приведён ниже.
<body style="background-color: lightblue;
background-image: url(./image/fon.gif);">
На локальном компьютере вы разумеется не заметите никаких изменений, но если документ передать по сети, то будет заметно, что сначала загрузятся цвет фона и текст вашего документа, а затем уже фоновый рисунок и другие рисунки. Это чревато следующей ситуацией: у вас чёрная фоновая картинка и на ней белые буквы; при загрузке страницы - по умолчанию установлен белый фон; загружаются белые буквы на белом фоне, фоновая картинка запаздывает на 15 секунд, пользователь не видит текста на вашей странице и не дожидаясь загрузки фона закрывает её. Правда печально?
Отдельно напоминаю, что свойство background-image применимо не только к элементу body.
Cвойство background-repeat
Это очень интересное свойство, которое позволяет задать распределение фонового рисунка. Наверное уже все заметили, что по умолчанию фон "размножается", или, говоря более конкретно, повторяется по оси X и по оси Y. Свойство background-repeat управляет повторением фона по горизонтали и по вертикали. Например зададим фоновый рисунок повторяющийся по оси Y.
<body style="background-color: lightblue;
background-image: url(fon.gif);
background-repeat: repeat-y">
Те, кто часто пользуется сетью Интернет наверное легко вспомнит десяток сайтов с подобным оформлением.
Cвойство background-position
Это уникальное свойство позволяет расположить ваш фон в любом месте окна. В качестве значения для этого свойства указываются координаты в абсолютных величинах, в относительных величинах, либо координаты задаются ключевыми словами.
Самой простой схемой указания координат фонового рисунка авляется указание абсолютных координат. Например абсолютные координаты 10mm 10mm, разместят левый верхний угол фонового изображения на расстоянии 10мм правее верхнего левого угла окна, и на 10мм ниже левого верхнего угла окна.
С относительным позиционированием дело обстоит несколько сложнее. Пара координат 0% 0% расположит левый верхний угол фоновой картинки в левом верхнем углу окна (значение по умолчанию). Пара координат 100% 100% расположит правый нижний угол фоновой картинки в правом нижнем углу окна. По этой логике и строится задание относительных координат других значений, например, при паре относительных координат 25% 10% броузер разместит точку фоновой картинки, расположенную на расстоянии 10% от верхней границы изображения, и 25% от левой границы изображения в точке расположенной на расстоянии 10% от верхней границы окна и 25% от левой границы окна. Мне кажется тут необходима иллюстрация.
В качестве примера раместим показанную ниже текстуру по центру окна, и по вертикали.
код будет выглядеть следующим образом:
<body style="background-color: navy;
background-image: url(fon4.jpg);
background-repeat: repeat-y;
background-position: 50% 0%;">
Пара координат 50% 0% устанавливает положение фонового рисунка следующим образом: на расстоянии 50% от левого края окна распологается центр картинки, а вершина картинки (координата по картинке 0%) устанавлевается на расстоянии 0% от верхней границы экрана.
Также можно задавать координаты фоновой картинки ключевыми словами, отображающими по заранее обозначенным относительным координатам. Список ключевых слов приведён в таблице.
Допустимые комбинации ключевых слов
| Комбинация ключевых слов | Значение относительных координат |
| top left, left top | 0%, 0% |
| top, top center, center top | 50%, 0% |
| top right, right top | 100%, 0% |
| left, left center, center left | 0%, 50% |
| center, center center | 50%, 50% |
| right, right center, center right | 100%, 50% |
| bottom, left left bottom | 0%, 100% |
| bottom, bottom center, center bottom | 50%, 100% |
| bottom right, right bottom |
100%, 100% |
Если вы захотите задать положение фонового рисунка в центре страницы, то это пишется при помощи ключевых слов следующим образом:
<body style="background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: center;">
Cвойство background-attachment
Очень полезное свойство. С его помощью вы можете определить будет ли фон прокручиваться вместе с содержимым окна, или будет постоянно оставаться на месте, независимо от скроллинга. Это свойство имеет два значения:
- fixed - положение фона фиксированно, т.е. он не зависит от прокрутки содержимого
- scroll - фон прокручивается вместе с содержимым.
В качестве примера имеет смысл рассмотреть задание фиксированного фона рисунка, поскольку по умолчанию рисунок прокручивается вместе с фоном.
<body style="background-color: white;
background-image: url(fon3.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;"> | 
Войти
Тематическое разделение информации.
Обновления в статьях по xhtml, css, java-script, UcoZ-системе и т.д.
Ваши комментарии.
p.s. l2meat.at.ua - там сами поймёте , чего я хочу!
