Web Профи


Работа с фоновыми изображениями в CSS

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

Для начала взглянем на фон с точки зрения HTML. Точка зрения, надо сказать, не самая лучшая, но будем соблюдать хронологию. Итак, для работы с фоном у нас имеется два атрибута:
BGCOLOR - задает фоновый цвет элемента. Присутствует у элементов BODY, TABLE, TR, TH и TD. В спецификации HTML 4.01 помечен как нежелательный для использования;
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, к примеру. Экономия кода налицо!