Я обнаружил довольно странную проблему, которую, я думаю, я знаю, как объяснить;я просто не знаю, как это исправить!
У меня есть страница с контейнером div # (div с минимальной высотой 100% (высота для IE)), содержащая заголовок "page-content""и нижний колонтитул.Фоновое изображение контейнера 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.
Надеюсь, вы, ребята, можете мне помочь!