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

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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

У меня была та же проблема. это фиксируется переполнением-x: прокрутка;

    top:0px; bottom: 0px;
    height: 100%;
    background-repeat: repeat;
    position: absolute;
    overflow-x: scroll;

Ответ 3

Ответ здесь:

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

Короче говоря, я делал вещи слишком сложными. Решение было:

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

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

  1. создавать отдельные стили CSS для каждое изображение bg, затем

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

Ответ 4

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

Ответ 5

Использование background-repeat:repeat-x даст вам только одну строку фонового изображения, повторяемую вверху. Если вы полностью удалите это свойство CSS, оно будет отображать фоновое изображение как по горизонтали, так и по вертикали, что похоже на то, что вы хотите. Если ваши фоновые изображения не имеют 1024px, они не заполнят содержащий div.

Ответ 6

В моем случае решение заключалось в том, чтобы установить фиксированную высоту и/или ширину в соответствующий div.

Ответ 7

У меня была эта проблема и исправлена ​​с помощью:

html {
    background-image: url('http://www.standardbrand.com/media/1237/home.jpg');
}
body{
    color: white;
    background: transparent;
}
<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      </ul>
    </body>
  </html>