CSS: фон отсутствует при горизонтальной прокрутке

Question

ОК. У меня есть фон, настроенный так:

HTML

<div id="container">
    <div id="content">
    CONTENT HERE
    </div>
</div>

CSS

#container
{
    background:url(image.gif);
}
#content
{
    width:800px;
    margin:auto;
}

Таким образом, идея состоит в том, чтобы содержимое находилось в поле размером 800 пикселей, в то время как фон для содержимого охватывает 100%, у меня есть такая же настройка для другой области, такой как верхний и нижний колонтитулы и основные части страницы. Таким образом, все они имеют разные фоновые изображения, охватывающие 100%, а содержимое - в рамке 800px.

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

Вы можете увидеть это здесь: Clicky

Есть ли способ это исправить?

Спасибо !!

Answer 1

Я выяснил (или кажется), что когда вы прокручиваете, только фон #content "раскрывает", а не фон #container. Так что я установил #content, чтобы он также имел тот же фон, что и #container Это решает проблему без необходимости показывать полосу прокрутки для не контента.

Answer 2

Так как вы используете область содержимого с фиксированной шириной, почему бы не дать вашему #container (фактически #inner_content_container на вашем сайте) фиксированную ширину? Поскольку ваше изображение имеет ширину 824 пикселя, я просто использовал FireBug, чтобы сделать ваш контейнер такой ширины, и ваша проблема исчезнет.

ПРИМЕЧАНИЕ. Когда вы сделаете это, вам также понадобится задать автоматическое поле для контейнера и установить переполнение на скрытый, если вы не хотите использовать полосы прокрутки.

#container {
  margin:auto;
  overflow:hidden;
  width:824px;
}