Как сохранить центрированное фоновое изображение от нарушения макета?

Question

http://www.goodshow.tv

У меня проблемы с фоновым изображением. Макет выглядит правильно, если браузер достаточно широк, но когда вы делаете его слишком узким, фон продолжает смещаться влево. Есть ли способ не дать ему двигаться?

Answer 1

Эта проблема возникает, когда ширина страницы становится меньше ширины <div id="body"> div, из-за чего div больше не центрируется. Я обнаружил, что смог решить эту проблему в Firefox по крайней мере, добавив:

html { min-width: 980px }

Answer 2

Удалите белую часть с фонового изображения и сделайте фон левой боковой панели белым с помощью правила фона CSS. Добавьте изображение только в правую часть. Сохраняйте ширину левой боковой панели.

Answer 3

Разве вы не можете просто инкапсулировать всю левую сторону с белым фоном div?

Answer 4

Мне кажется, проблема в том, что области навигации и контента плавают, а контент имеет абсолютную ширину.

Самое быстрое решение - установить цвет фона на #nav на белый. Это все равно вызовет проблемы с заголовком (Good Show и A creative studio в Атланте), но я думаю, что вам все равно придется пересмотреть, как вы делаете эту часть (это всего лишь 2 изображения)

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

Answer 5

Интересно, связано ли это с использованием селекторов css body и #body (один для тега с именем body и один для элемента с именем body

Намерено ли, чтобы область навигации имела белый фон, а у #content div - фон изображения?

Не могли бы вы попробовать это вместо того, что у вас есть:

body {
    margin: 0px;
    padding: 0px;
}
#content {
    background-color: #333;
    background-image: url(../images/bg.png);
    background-repeat: repeat-y;
    background-position: center;
    float: right;
    width: 720px;
    padding-top: 35px;
    padding-left: 0px;
}