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

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

26 голосов
/ 18 января 2010

работает на очень маленьком сайте, который загружается за один раз, поэтому есть div, который содержит все фоновые изображения, и, кроме того (т. Е. выше z-index ), есть 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;
}

Ответы [ 8 ]

28 голосов
/ 13 марта 2010

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

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

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

9 голосов
/ 29 мая 2015

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

    top:0px; bottom: 0px;
    height: 100%;
    background-repeat: repeat;
    position: absolute;
    overflow-x: scroll;
4 голосов
/ 18 января 2010

Ответ здесь:

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

Короче, Я слишком усложнял . Решение было:

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

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

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

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

3 голосов
/ 30 июля 2015

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

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>
3 голосов
/ 25 декабря 2012

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

2 голосов
/ 15 ноября 2011

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

2 голосов
/ 18 января 2010

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

1 голос
/ 06 апреля 2018

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

Например, большинство людей используют это в своем коде 

body {
   height: 100%; //avoid it
}
...