Фон Div не позиционируется вместе с Div
-
22-07-2019 - |
Вопрос
У меня есть пара Divs, которые я оформляю с помощью class и ID, сами div являются emtpy, поскольку они являются только заполнителями для своего фона.Пример Div:
<div id='ranImg1' class='ranImg'></div>
Затем я оформляю их, используя этот css:
.ranImg {
position:fixed;
z-index:0;
width:250px;
height:250px;
display:block;
}
#ranImg1 {
left:10px;
top:200px;
background-attachment:fixed;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
Пока Div находится в левой верхней части документа, изображение отображается правильно, но когда Div помещается где-то еще на странице, изображение остается (невидимым) в верхнем левом углу страницы, показывая только ту часть, которая перекрывается с div (в примере это была бы нижняя часть изображения).
Редактировать
Я пытаюсь расположить эти разделы, не влияя на мой другой макет, они находятся за другим макетом.Это работает, за исключением того факта, что фоновое изображение не соответствует позиции divs.
Итак, в основном мой вопрос заключается в том, почему фон для ranImg1 div не позиционируется вместе с div, а остается в левом верхнем углу, и как это исправить?
Решение
ваш background-attachment:fixed
прикрепит фоновое изображение относительно окна браузера.если вы хотите, чтобы он "следовал" за div
положение, просто удалите линию:
#ranImg1{
left:10px;
top:200px;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
вы также могли бы установить background-position
атрибут для установки фона относительно содержащего div:
background-position: 0px 0px;
я не уверен, поможет ли это чему-либо, кроме простого удаления background-attachment
хотя (пока недостаточно кофе!)