Как исправить фоновое изображение внутри div

Я обнаружил довольно странную проблему, которую, думаю, знаю, как объяснить; я просто не знаю как это исправить!

У меня есть страница с контейнером div # (div со 100% минимальной высотой (высота для IE)), содержащей заголовок, «содержимое страницы» и нижний колонтитул. Фоновое изображение контейнера div # должно быть фиксированным (не фиксированное положение, а background-attachment: fixed , которое заставляет изображение следовать при прокрутке).

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

CSS выглядит следующим образом: (без background-attachment: fixed; )

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

margin: 0 auto; для центрирования div и ! Important вещь в первой height: - заставить IE игнорировать этот конкретный тег высоты. Это необходимо, если min-height: 100% должно работать.

Когда я добавляю это ...

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-attachment: fixed; //This is what is added to the code-sample
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

... фоновое изображение выходит за пределы div. Позвольте мне объяснить это: единственная видимая часть фонового изображения - это то, что все еще находится внутри