Вопрос по html, css, browser, scroll, background-image – Фоновое изображение не повторяется, когда окно браузера меньше, чем содержимое?

9

У меня есть заголовок-контейнер с фоновым изображением, например так:

#header-container
{
background:url(../img/bg.jpg) repeat-x 0 0px;
margin:0px auto;
width:100%;
text-align:center;
}

Когда мой браузер работает в полноэкранном режиме (Firefox, Opera, IE), я получаю следующий результат (все в порядке):

Когда я изменяю размер браузера до меньшего окна, я получаю это (пока все хорошо):

и когда я сейчас прокручиваю вправо, фоновое изображение не повторяется.

Есть ли способ исправить это, чтобы изображение повторялось при прокрутке вправо? Я знаю, что это сработает, когда я переместу фоновое изображение в тело CSS, но у меня есть много изображений для разных элементов div, поэтому я не могу сделать это с фоновым изображением тела.

Надеюсь, кто-нибудь может дать мне подсказку: D

С наилучшими пожеланиями, Бернте

Чаще всего это происходит, когда тело или некоторый элемент, содержащий содержимое, имеет минимальную указанную ширину, которая больше ширины окна. Фоновое изображение расширяется, чтобы заполнить ширину элемента, поэтому оно отображается правильно. Тем не менее, другой контент перекрываетсясо стороны этого элемента и окна браузерадолжен прокрутите вправо, чтобы просмотреть этот дополнительный контент. Иногда поля или отступы могут также вызывать эту проблему, но я не знаю, как ее исправить. animuson♦

Ваш Ответ

6   ответов
1

after с вашим изображением.

#header-container:after {
    content: "";
    background:url(../img/bg.jpg) repeat-x 0 0px;
    width: 9999px;
    position: absolute;
}

Или что-то типа того.

1

ссе:

#header-container
{
    background:url(../img/bg.jpg) repeat-x 0 0px;
    text-align:center;
}

width:100% делает так, что div принимает ширину области просмотра, которая не равна ширине документа, если вы можете прокрутить вправо или влево.

Если это не так, нам (всем) понадобится ваш основной макет HTML и CSS, чтобы найти правильное решение.

Не хочу критиковать другие ответы, но на данный момент они, вероятно, слишком сложны для того, чего вы на самом деле хотите достичь ... (приветствуется более подробное описание)

3

по которой это не работает, заключается в том, что в CSS блочные блоки не расширяются, чтобы окружить их содержимое. Твой#header-container имеет обычную ширину (не шире окна) и не расширяется вправо.

Попробуйте подать заявку#header-container { display: table; }, Использование макета таблицы приводит к тому, что поле увеличивается в соответствии с содержимым, но если его не нужно увеличивать, оно все равно будет соответствовать вашемуwidth.

1

body" "width: 100%; display: table;"

body
{
    //..your_body_css_here...
    width: 100%;
    display: table;

}
5

более вероятно, что у вас есть наборmin-width или просто некоторый контент, который расширяет страницу за доступные границы.

Вот пример второго:http://jsfiddle.net/kizu/3hLjv/

Чтобы исправить второй, вы можете сделать обертку так, чтобы ее ширина определялась дочерними элементами, например, вы можете использоватьinline-block за это:http://jsfiddle.net/kizu/3hLjv/1/, если у вас нет оболочки, вы можете установить этоBODY: http://jsfiddle.net/kizu/3hLjv/2/

И если у вас есть несколько блоков сwidthс илиmin-widths больше, чем заголовки, просто добавьте то же самоеmin-width в заголовок:http://jsfiddle.net/kizu/3hLjv/3/

3

поэтому я добавлю еще один ответ, может быть, он кому-нибудь поможет.

Решение Кевина Рейда сработало для меня, но только в сочетании с установкой ширины на 100%, так что вот что я закончил:

#header-container
{
    display: table;
    width:100%;
    background:url(../img/bg.jpg) repeat-x 0 0px;
    margin:0px auto;
}
Спасибо, у меня тоже сработало. Необходимая ширина: 100% тоже. Pim Schaaf

Похожие вопросы