Контейнер DIV background image не расширяется с контентом

Question

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

Я также включил html, тело, поскольку я не уверен, где проблема.

CLICK HERE TO SEE THE PAGE I AM HAVING TROUBLE WITH

Спасибо !!!

html,body { 
    background-color: #999; 
    background-image: url(../images/bg.jpg); 
    background-position: top; 
    background-repeat: repeat; 
    color: #fff; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 12px; 
    height: 100%; 
    line-height: 18px; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    background-color: #000; 
    background-image: url(../images/bg_container.gif); 
    background-position: left top; 
    background-repeat: repeat-y; 
    display: block; 
    height: 100%; 
    margin: 0 auto; 
    max-width: 1200px; 
    min-width: 860px; 
    padding: 0 3px 0 3px; 
    position: relative; 
} 

Answer 1

Проблема здесь заключается в использовании position:absolute на DIV id="triathlete" тогда ваш главный контейнер не принимает в уходе за пространство этого элемента. Решение, которое вы можете попробовать это:

• В вашем HTML изменить порядок между двумя элементами, у вас есть:

  <div id="triathlete"></div> 
  <div id="mainBody"></div> 
  

  Изменить эти элементы, как это:

  <div id="mainBody"></div> 
  <div id="triathlete"></div> 
  

• Тогда удалить position:absolute:

  #triathlete { 
      background-image: url(../images/image_triathlete.png); 
      background-position: top; 
      background-repeat: no-repeat; 
      display: block; 
      left: 3px; 
      margin: 0; 
      padding: 87px 30px 0 30px; 
      /*position: absolute; Remove this 
      top: 363px;*/ 
      width: 150px; 
      z-index: 3; 
  } 
  

• И изменить height для контейнера min:

  #container { 
      min-height:100%; 
  } 
  

Demo

Answer 2

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

setInterval(function() { 
    $("#container").css("height",$(document).height()); 
},50); 

Это будет автоматически в масле изменить размер вашего контейнера div, чтобы охватить все его содержимое, даже если они абсолютно расположены.

Отметив, что это не тот способ решить подобную проблему, но может помочь вам, если у вас нет времени сделать это правильно.