Div de fundo não posição com o Div
-
22-07-2019 - |
Pergunta
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?
Solução
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!)