Фоновое изображение и расположение div?

Question

У меня есть следующая структура:

<div id="wrap">
   <div id="container">
       <div id="header">
       </div> <!--close header-->
       <div id="main">

… etc

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

Я поместил #bgimage div после открывающего тега #container div и попробовал следующий CSS:

1. позиция: фиксированная + высота: 100% - отображает полную высоту изображения, но не прокручивает содержимое страницы

2. позиция: абсолютная + высота: 100% - прокручивает страницу, но обрезает изображение там, где заканчивается содержимое страницы

3. позиция: абсолютная + высота: 1000 пикселей - отображает полное изображение, но заставляет страницу прокручиваться

Есть идеи?

Спасибо

Answer 1

Использовать background-attachment: исправлено; он будет прокручиваться вместе со страницей.

Answer 2

Установить фон на самом теле. CSS3 позволяет вам установить несколько фонов, если у вас уже есть один. Хотя это не работает в IE8 и раньше.

[править]

Так как это не работает на вашей странице, попробуйте сделать bgimage div контейнером для содержимого вашей страницы без указания точной высоты. Установите минимальную высоту 100%.

Таким образом, он должен соответствовать размеру содержимого страницы. Он всегда будет доходить до нижней части окна и не будет заставлять полосы прокрутки, когда они не нужны. Благодаря min-height окно div заполняет окно в случае, если содержимое меньше высоты окна.