CSS: фоновое изображение не заполняется при прокрутке

Question

CSS: фоновое изображение не заполняется при прокрутке

при работе над очень небольшим сайтом, который загружается сразу, таким образом, существует отделение, которое содержит все фоновые изображения, и к тому же (т.е. более высокий z-индекс) существует отделение содержания, которое содержит все. Я могу переключить фоны легко на основе того, какое содержание выбрано.

К сожалению, я заметил, запускаетесь ли Вы в маленьком окне так, чтобы полосы прокрутки появились, если Вы прокручиваете нет никакого фонового изображения в 'показанных' частях страницы.:-(

Структура страницы:

<body>
<div id="bg">
    <div class="bgone"></div>
    <div class="bgtwo"></div>
</div>

<div id="container">
<!-- content panels here -->
</div>
</body>

css:

#bg
{
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height: 1024px;
    z-index:1;
}
.bgone
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/one.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:2;
}
.bgtwo
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/two.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:3;
}
#container
{
    position:relative;
    width:900px;
    padding:0px;
    margin:0px auto;
    height:600px;
    z-index:10;
}

26

css scroll background-image

задан rekindleMyLoveOf 18 January 2010 в 04:02

3 ответа

Другие вопросы по тегам:

css scroll background-image

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

score 4 · Answer 1

Ответ здесь:

http://bytes.com/topic/html-css/answers/577902-background-image-getting-cut-off-outside-original-window-display

Одним словом, я все усложнял. Решение заключалось в том, чтобы:

избавиться от ныряльщиков, которые держат bg изображения - вам нужно будет установить размеры до 100% только для того, чтобы увидеть bg img, но это будет только 100% смотровой площадки / смотрового экрана, что не пересчитывается, когда вы Свиток.
применяйте любые изображения bg непосредственно к элемент тела, потому что его размеры не ограничиваются начальный размер вью-порта

и в моем случае (используя несколько bg изображений):

создать отдельные css стили для каждое изображение bg, затем
используйте jquery, чтобы применить их к тело - например $(body).addClass("specialbg"); etc

score 28 · Answer 2

У меня была такая же проблема, и это раздражает. Проблема для меня была в том, что я не мог изменить HTML, только CSS, поэтому я не мог удалить дополнительные div'ы.

Проблема, как я ее вижу, в том, что фон имеет "width: 100%", а контейнер - "width: 900px". Поэтому, например, если окно браузера имеет ширину 800px, фоны установлены на 800px и, следовательно, при прокрутке окна по горизонтали, вы получаете области без фона.

Другой способ решить эту проблему - убрать из фонов параметр "width: 100%" и заменить его на "min-width: 900px", что заставит фоны всегда иметь ширину не меньше ширины контейнера. Когда размер окна становится меньше 900px, фоны всегда остаются на том же уровне, что и контейнер. Работает отлично.

score 2 · Answer 3

Использование Фоновое повторение: Repeat-X будет давать вам один ряд фонового изображения, повторяемого вдоль верхней части. Если вы удалите это свойство CSS в целом, он будет плиткой фонового изображения как горизонтально, так и вертикально, что звучит, как вы хотите. Если ваши фоновые изображения не высоки 1024Px, они не будут заполнять содержащую Div.