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

Question

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

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

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

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

Любые предложения приветствуются

Редактировать: Изображение прикреплено для ясности.

Answer 1

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

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

Answer 2

Если вы используете свойство CSS background-image для вашего div-элемента headerbackground, а значение 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;
}