Библиотека Интернет Индустрии I2R.ru

Пожалуй, редко возникают ситуации, когда можно сверстать страницу без использования атрибутов и свойств для работы с фоном. Фон присутствует везде: цвет фона надо прописывать для элемента BODY, фоновые изображения часто применяются в навигационных панелях (руки бы таким дизайнерам пооборвать), фоном делаются цветовые выделения заголовков и т.д. Короче, если с фоном не умеете обращаться, то тяжело вам придется…

Древние реликты (HTML)

Для начала взглянем на фон с точки зрения HTML. Точка зрения, надо сказать, не самая лучшая, но будем соблюдать хронологию. Итак, для работы с фоном у нас имеется два атрибута:

1. BGCOLOR - задает фоновый цвет элемента. Присутствует у элементов BODY, TABLE, TR, TH и TD. В спецификации HTML 4.01 помечен как нежелательный для использования;
2. BACKGROUND - задает фоновое изображение для элемента. Согласно спецификации HTML 4.01 присутствует только у элемента BODY и помечен как нежелательный для использования, однако браузеры поддерживают данный атрибут для элементов TABLE и TD.

Естественно, набор крайне ограничен и морально устарел года два назад. Но страшно сказать, какой процент кодеров пользуется только этими двумя атрибутами! Я догадываюсь, чем это вызвано. Хороший кодер достаточно ленив по своей природе, так что из этой лени должна логичным образом вытекать оптимизация труда и сокращение времени на кодирование. То есть надо быть в курсе всех нововведений, которые это самое кодирование облегчают. Плохой кодер ленью не наделен, по этой причине он упорно использует устаревшие (но проверенные) методы, трудолюбиво прописывая теги и FONT по 6 часов в сутки (два часа остается на таблицы :). Очевидно, плохих кодеров гораздо больше, чем хороших, поэтому использование морально устаревших методов в вебе дело привычное.

Надеюсь, лень входит в число ваших достоинств, так что освоение нижеизложенного материала сократит время, которое вы проводите за кодированием, а времени на самообразование и Quake (Counter Strike, StarCraft, HMM 4 - нужное подчеркнуть) останется больше.

Альтернатива новой эры (CSS)

Я бы вообще не писал эту статью, если бы альтернативы не было. Альтернатива, как вы догадались, содержится в каскадных таблиц стилей (CSS). Вам будет приятно услышать, что в спецификации CSS-1 (второй уровень отложим до лучших времен) есть пять свойств для работы с фоном. Займемся ими, если не возражаете.

background-color

Задает цвет фона элемента. Главное отличие этого свойства от атрибута BGCOLOR в том, что с его помощью можно задать фоновый цвет для любого элемента. На первый взгляд, преимущество незначительное, однако после конкретного примера все становится на свои места. Допустим, нам надо сделать блок, в котором будет серый фон. С помощью HTML в таком случае без таблицы не обойтись, а вот с помощью CSS можно повесить стиль на элемент P, к примеру. Экономия кода налицо!

HTML (101 знак)	CSS (79 знаков)
<TABLE><TR><TD BGCOLOR=#666666> <FONT COLOR=#FFFFFF>Белый текст на сером фоне</FONT> </TD></TR></TABLE>	P { background-color: #666; color: #FFF} . . . <P>Белый текст на сером фоне</P>

background-image

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

HTML (112 знаков)	CSS (89 знаков)
<TABLE><TR><TD BACKGROUND=img/bg.gif> <FONT COLOR=#FFFFFF>Белый текст на фоновом рисунке</FONT> </TD></TR></TABLE>	P { background-image: url(img/bg.gif); color: #FFF} . . . <P>Белый текст на фоновом рисунке</P>

background-repeat

Если задано фоновое изображение, то определяет, будет ли повторяться это фоновое изображение и, если будет, то каким образом.

Значения:

• repeat: изображение повторяется по горизонтали и по вертикали
• repeat-x: изображение повторяется только по горизонтали
• repeat-y: изображение повторяется только по вертикали
• no-repeat: изображение не повторяется

В HTML подобного атрибута нет вообще, а по умолчанию изображение повторяется и по горизонтали, и по вертикали, так что работать с фоном только средствами HTML очень сложно.

Часто кодеры поступают следующим образом. Если надо, скажем, чтобы изображение не повторялось вообще, то делают рисунок таких размеров, чтобы его повторение не было заметно на любых мониторах. Это примерно 1600ґ1200 пикселей. Сами понимаете, что решение это корявое (увеличивается вес рисунка), но единственно возможное средствами HTML. С помощью CSS проблема решатся изящно и легко.

BODY {
background-image: url(img/bg.gif);
background-repeat: no-repeat}
. . .
<BODY>Содержимое страницы на фоновом неповторяющемся рисунке</BODY>

background-attachment

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

Значения:

• fixed: фон будет оставаться неподвижным, а содержимое страницы будет перемещаться относительно него
• scroll: фон будет перемещаться вместе с остальным содержимым. Значение по умолчанию.

В HTML нет атрибута, равнозначного данному свойству, а по умолчанию любой фон перемещается при скроллировании, то есть имеет значение scroll.

P {
background-image: url(img/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed}
. . .
<P>Текст на фоновом неповторяющемся и неподвижном рисунке</P>

background-position

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

В качестве значений можно указывать длину как положительную, так и отрицательную. Например, правило:

P {
background-image: url(img/bg.gif);
background-position: -12px 50px}

смещает фоновое изображение на 12 пикселов влево и на 50 пикселов вниз от левого верхнего угла элемента P. Кроме того, можно указывать процентные соотношения. Проценты вычисляются относительно ширины и высоты блока элемента. Например, правило:

P {
background-position: 20% 40%}

смещает фоновое изображение на 20% вправо и на 40% вниз от левого верхнего угла блока элемента P. Значением по умолчанию является 0% 0%, что соответствует верхнему левому углу. Кроме того, можно вместо численных значений указывать выравнивание относительно элемента. Так для выравнивания по вертикали можно использовать три ключевых слова:

• top: выравнивание по верхнему краю;
• center: выравнивание по центру;
• bottom: выравнивание по нижнему краю.

Для выравнивания по горизонтали можно использовать ключевые слова:

• left: выравнивание по правому краю;
• center: выравнивание по центру;
• right: выравнивание по правому краю.

Таким образом, правило:

P {
background-position: 0% 0%}

эквивалентно правилу:

P {
background-position: top left}

В HTML нет атрибута, который бы соответствовал данному свойству, а значение по умолчания для фона, заданного средствами HTML, совпадает со значением по умолчания для фона, заданного с помощью CSS и составляет 0% 0%.

P {
background-image: url(img/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center}
. . .
<P>Текст на фоновом неповторяющемся и неподвижном рисунке, который отцентрирован по горизонтали</P>

Теория работы с фоном на этом практически исчерпывается. По крайней мере, существенных моментов я не упустил. Впереди незабываемая и неизбежная встреча с прикладным применением.