Фон Div не позиционируется вместе с Div

Question

У меня есть пара 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, а остается в левом верхнем углу, и как это исправить?

Answer 1

ваш 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 хотя (пока недостаточно кофе!)