HTML/CSS: Создание div, который не запускает горизонтальную полосу прокрутки, если она шире размера экрана

Question

Я пытаюсь улучшить пользовательскую совместимость сайта для мониторов 800 x 600 пикселей.

У меня есть заголовок 'headerbackground', который имеет ширину 900 пикселей и содержит только фоновое изображение. Остальная часть сайта вложена внутри этого div с шириной 790 пикселей.

То, что я хотел бы сделать, это показать полный 900px «headerbackground» Див, если окно браузера больше, чем 900px, но не триггера горизонтальной полосы прокрутки в браузере, если экран разрешение между 790 & 900px.

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

Любые предложения оценили

Edit: изображение прилагается для ясности.

Answer 1

... А через пару минут после публикации я выясню это для себя. Сожалею. В случае, если у кого-то еще такая же проблема:

Дайте headerbackground div шириной 100% и минимальную ширину так же, как и внутренние div. Центрируйте фоновое изображение headerbackground div. Наконец, вам понадобится ручка min-width, чтобы сделать IE 6 счастливым.

Answer 2

Если используется свойство CSS background-image для «headerbackground DIV» и headerbackground меньше, чем размер фонового изображения, полоса прокрутки не будет срабатывать. Скорее, фоновое изображение будет усечено.

Update:

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

body { background-color: blue; } 
#headerbackground { 
    background-color: red; 
    background-image: url(your/url.png); 
    background-position: center top; 
    margin-left: auto; 
    margin-right: auto; 
} 
#content { 
    background-color: green; 
    width: 790px; 
    margin-left: auto; 
    margin-right: auto; 
}