Сжимающаяся шапка сайта

Однажды мне потребовалось сверстать дизайн, в котором шапка по ширине была ощутимо шире основной части сайта: общий дизайн был рассчитан на ширину 990px, а шапка имела размер 1160x306 пикселей. Встал вопрос: что же делать при разрешении в 1024px. Оставлять полосу горизонтальной прокрутки мне сильно не хотелось, и поэтому стал искать решение, как сделать, чтобы от шапки в таких ситуациях показывалась центральная часть, а края — пропадали. И в итоге найдено было вот такое решение:

Шапку я поместил как фон в два вложенных друг в друга блока с абсолютным позиционированием. Первый имел ширину 100%, для второго задал минимальную и максимальную ширину и вывод по центру с помощью margin:auto. В нем и отображалась шапка как фоновый рисунок, причем позиционировалась она тоже по центру. Код всего этого выглядел примерно следующим образом:

<div style="position: absolute; top: 0; left: 0px; width: 100%; background: url('title-bg.jpg') #AEB1CE; height: 306px;"><div style="background: url('title.jpg'); height: 306px; max-width: 1168px; min-width: 990px; background-repeat: no-repeat; background-position: center; margin: auto;"></div></div>

Этот же трюк можно использовать при верстке резиновых макетов с большой шапкой. Если нужно, чтобы исчезала только правая часть шапки, то background-position имеет смысл поменять на left.