Div de fundo não posição com o Div

Question

Eu tenho um par de Divs qual estilo I usando uma classe e um ID, ele div é em si são emtpy uma vez que eles são apenas espaços reservados para seu fundo. Exemplo Div:

<div id='ranImg1' class='ranImg'></div>

estilo Então eu los usando este 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;
}

Enquanto o Div é no canto superior esquerdo do documento mostra a imagem corretamente, mas quando o Div é colocado em outro lugar na página as estadias de imagem (invisíveis) no canto esquerdo superior da página mostrando apenas a parte que sobreposições com o div (no exemplo disso seria a parte inferior da imagem).

Editar Eu estou tentando posicionar estes Divs sem afetar meu outro layout, eles estão atrás do outro layout. Isso funciona, exceto para o fato de que a imagem de fundo não segue a posição divs.
Então, basicamente a minha pergunta é, por que não é o fundo para o posicionamento div ranImg1 com o div mas estadias no canto superior esquerdo, e como corrigir isso?

Answer 1

seu background-attachment:fixed vai anexar a imagem de fundo em relação à janela do navegador. se você quer que ele "seguir" a posição div, apenas remova a linha:

#ranImg1{
  left:10px;
  top:200px;
  background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
  background-repeat:no-repeat;
}

Você também pode definir o atributo background-position para definir o plano de fundo em relação ao div contendo:

background-position: 0px 0px;

não tenho certeza se isso iria ajudar qualquer além de apenas remover background-attachment embora (café não o suficiente ainda!)