Как исправить фоновое изображение внутри 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. Позвольте мне объяснить это: единственной видимой частью фонового изображения является то, что все еще находится внутри <div id="container">, но часть изображения перемещается за пределы div и теперь невидима.

Подводя итог...

Когда фоновое изображение фиксировано, фоновое изображение частично скрыто, перемещаясь за пределы div. Изображение позиционируется в верхнем правом углу окна браузера, а не в верхнем правом углу div.

Надеюсь, вы, ребята, можете мне помочь!

Ответы

Ответ 1

Это поведение действительно правильно. Любой фон attachment: fixed будет относиться к окну просмотра, а не к элементу, к которому он применяется. Это на самом деле лежит в основе демонстрации Complex Spiral Эрика Мейера.

Ответ 2

В то время как вы не можете иметь фиксированное фоновое положение в div, самым простым решением было бы создать div размером вашего изображения. Сделайте изображение фоном и установите его в position:absolute в верхнем правом углу div, который вы хотите разместить, используя right:0px;top:0px. Убедитесь, что родительский div равен position:relative или он не будет помещен абсолютно внутри этого div.

Ответ 3

Вам следует попробовать добавить свойство background-origin, возможно, значение border-box решит вашу проблему. Также вы можете определить background-size, имейте в виду, что cover и contain поддерживаются и очень полезны.