фонового изображения отрезано вне видового экрана

Url для непослушного сайта: http://chrism.se фонового изображения отрезано вне видового экрана

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

Состояние html и css такое же, как когда я узнал об этой проблеме, но я пробовал предложения, которые я видел по аналогичным вопросам, в основном вращающиеся вокруг min-width. Я не понимаю разницу между background is only as wide as viewport? и моя проблема?

Полный вид = i.imgur.com/6aDpN.jpg

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

источник

2011-01-24 Cederfjard

Я чувствую себя обязанным указать на то, что тот, кто сделал этот сайт не думал много о разрешении экрана. Вы получаете горизонтальную полосу прокрутки на '1280x1024'. Он должен был быть спроектирован так, чтобы соответствовать этой ширине. Посмотрите на сайт в http://browsersize.googlelabs.com/, чтобы понять, что я говорю. – thirtydot

Да, я с тобой. Но не проблема. – Cederfjard

Я ищу вашу проблему.Трудно исправить, потому что дизайнер просто не думал об этом типе проблемы. Я мог (и надеюсь, что), я ошибаюсь, но похоже, что единственный способ решить это - изменить много вещей вокруг. «Проблема» - это '#bodyCurrent, #bodyNext {width: 100%}' (она заканчивается как '100%' окна просмотра), но избавление от этого приводит к худшим проблемам, которые необходимо исправить. – thirtydot

Ближе всего к рабочему раствору я мог бы найти было от #bodyCurrent, #bodyNext:

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

Глядя снова, может быть, это достаточно хорошо.

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

источник

2011-01-24 14:25:55 thirtydot

Это, безусловно, похоже на трюк! Cheers, спасибо за вашу помощь – Cederfjard

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

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

источник

2011-01-24 13:32:23 Nasir

есть изображение на фоне другого DIV, слишком короткого в высоте – Nasir

Благодарим вас за ввод. Это не идеально для меня, поскольку оно не должно быть статичным. Также не заботится о разрыве ниже нижнего колонтитула. – Cederfjard

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"); 
}

источник

2011-05-31 15:57:19

Приветствия за отзыв! – Cederfjard

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

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

источник

2012-05-18 15:42:46 TorranceScott

Испытано его в IE7:

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

источник

2012-06-26 13:08:31 Davis

фонового изображения отрезано вне видового экрана

ответ

Смежные вопросы