IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Основы CSS. Боди(и фон) - описание стилей

Описание BODY таблицами стилей можно условно и упрощенно разделить на описание ФОНА и описание ТЕКСТА. Общий вид в HEAD:

<style type=text/css>
<!--
 body{background-color: #000000;
font-family: MS Sans Serif, tahoma, Verdana, Arial;
 FONT-SIZE: 10px;  color: #00EFFF}
-->

Первым пунктом, как видите, у нас стоит "background-color:#000000;". На деле это означает, что фоном у нас будет цвет такой-то. В данном случае — черный. Можно назначить в фоне рисунок:background: url( "fon.gif"); Лучше при назначении рисунка назначать и цвет, хоть для того, чтобы при загрузке не происходило резкого скачка с белой страницы на цветную. Или, вдруг, рисунок фона не загрузится.
Так это выглядит на деле:

<style type=text/css>
<!--
 body{background: url( "fon.gif");
 background-color: #000000;
 font-family: MS Sans Serif, tahoma,
Verdana, Arial;  FONT-SIZE: 10px; color: #00EFFF}
-->
</style>

Кроме этого мы можем управлять размножением фонового рисунка.
Пишемbackground-repeat: значение и подставляем следующие значения:
no-repeat — не размножать (просто рис. в углу экрана).
repeat — размножить ( если не указывать "background-repeat:" вообще, то так и получится).
repeat-x — размножить по горизонтали.
repeat-y — размножить по вертикали.

Можно управлять скроллированием фона.
background-attachment:значение и значения:
fixed — фон неподвижен.
scroll — фон скроллирунтся вместе со всей страницей.
По умолчанию фон скроллируется.
Между прочим, довольно интересных эффектов можно добиться фиксацией фона.
Можно задать смещение фонового рисунка:
background-position: X Y — значения X и Y могут описываться как:
left, center, right или значения в px, %

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

<style type=text/css>
<!--
 body{background: url( "fon.gif");
 background-color: #000000;
 background-attachment: fixed;
 font-family: MS Sans Serif, tahoma,
Verdana, Arial;  FONT-SIZE: 10px; color: #00EFFF}
-->
</style>

Дополнение
С выходом Нетскейпа 6 все изменилось — фон можно описывать "на всю катушку", Опера 5 работает тоже вполне удовлетворительно.

Источник: A-design studio http://mtk.on.ufanet.ru

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.