Один из популярных методов "подгона" сайта под разрешения - размножение фоновых изображений.

Недолго думаю, я нашёл сайт студии "АРТ" , на котором данный метод применён в полном обличии. Стоит обратить внимание на "шапку" (синий градиент) и "футер" (зелёный). Если масштабировать размер сайта до 50% (масшаб можно изменить с помощью Оперы), то заметим, что эти элементы растянулись путём многократного повторения маленького кусочка градиента:

Если бы были установлены фиксированные размеры, то границы градиента были видны при масштабировании. Примерно бы это смотрелось так:

Какая же польза от этой технологии?

• Кросс-браузерность, о которой я говорил во вступительной статье.
• Совместимость со многими расширениями, а это тоже не маловажный фактор.
• Быстрая загрузка страниц, так как документы с большими изображениями грузятся дольше.

Итак, теперь о технической стороне - реализации.

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

Для фиксированного размера мы бы использовали весь градиенты полностью, что существенно ударяло по загрузке страницы, а так нет. Отлично, изображения мы подготовили, теперь необходимо прописать это самое "размножение".

Допустим, каркаc имеет табличную структуру (так и обстоит дело с нашим сайтом-примером):

<table>
<tr><td>
<!--Шапка-->
</td></tr>
<tr><td>
<!--Середина-->
</td></tr>
<tr><td>
<!--Футер-->
</td></tr>
</table>

Графический вариант на примере нашего примера-сайта:

Теперь задаём отдельные классы в HTML-коде:

<table class="main">
<tr><td class="header">
<!--Шапка-->
</td></tr>
<tr><td class="center">
<!--Середина-->
</td></tr>
<tr><td class="footer">
<!--Футер-->
</td></tr>
</table>

Теперь стилизуем прописанные нами стили в CSS-таблице:

body {
margin:0px;
}
.main {
width:100%;/*Ширина табличного каркаса сайта*/
}
.main header {
background:url(header.jpg) repeat-x;/*Размножаем кусочек header.jpg по оси Х для шапки*/
}
.main center {
background-color:#f2f9f7;/*Фоновый цвет середины сайта*/
}
.main footer {
background:url(footer.jpg) repeat-x;/*Размножаем кусочек footer.jpg по оси Х для футера*/
}

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