Фоновое изображение обрезано за пределами области просмотра

Question

URL для недисциплинированного сайта: http://chrism.se

После того, как мы запустили его в эфир, мы обнаружили, что если область просмотра слишком мала для содержимого, чтобы требовать прокрутки, фоновое изображение (body-tag, repeat-x) не будет выходить за пределы исходного вида, но я не могу на всю жизнь сообразить почему и как это исправить. Следует иметь в виду, что я сам не кодировал сайт, так как я не настолько разбираюсь в Javascript, и дизайнеры хотели получить некоторые эффектные эффекты. Мой старший коллега наверняка мог бы найти лекарство, но его, к сожалению, нет, и я хотел бы закончить.

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

Полный просмотр = i.imgur.com / 6aDpN.jpg

Проблема = i.imgur.com / X6JVp.jpg

Answer 1

IE не поддерживает минимальную ширину, поэтому вы можете использовать выражение для того же:

body {
    /* fix for most browsers, fill in desired width */
    min-width: 1000;

    /* IE Version, fill in desired width equal to the min-width, second value with 2px less */
    width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}

Answer 2

Я понимаю, что опаздываю на вечеринку, но столкнулся с той же проблемой и добавил минимальную ширину к телу, чтобы решить эту проблему. Поскольку ссылка, которую вы указали, по-прежнему имеет эту проблему, я полагаю, что вам может понадобиться совет. Минимальная ширина тела должна быть не меньше ширины области просмотра, когда появляются горизонтальные полосы прокрутки.

Проще увидеть, что происходит, если вы сделаете свой видовой экран достаточно маленьким для полос прокрутки и используете трехмерный вид Firefox для просмотра страницы. Затем вы увидите, что ваш регион нижнего колонтитула настроен на 100% ширины элемента body и фон работает нормально; однако само тело меньше, чем переполнение верхней части страницы, поэтому при прокрутке вы получаете эту обрезанную область. Поэтому сделайте так, чтобы элемент body имел минимальную ширину, равную переполнению верхней части страницы, и все будет готово. Это довольно распространенная проблема (я даже заметил это на mailchimp некоторое время).

Answer 3

Самое близкое к рабочему решению, которое я мог найти, было от #bodyCurrent, #bodyNext:

• Удалить right: 0.
• Добавить min-width: 1349px.

Снова посмотрю, может быть, этого достаточно.

Протестировано только в Firefox с использованием Firebug.

Answer 4

Протестировано в IE7:

html, body {
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}

Answer 5

Добавьте это к фону div#wrapper:

background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;