Pregunta

Tengo un par de Divs que estilo usando una clase y una ID, los div's en sí son vacíos ya que solo son marcadores de posición para su fondo. Ejemplo Div:

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

Luego los estilo 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;
}

Mientras el Div esté en la parte superior izquierda del documento, la Imagen se muestra correctamente, pero cuando el Div se coloca en otro lugar de la página, la imagen permanece (invisible) en la esquina superior izquierda de la página mostrando solo la parte que se superpone con el div (en el ejemplo, esta sería la parte inferior de la imagen).

EDITAR Estoy tratando de posicionar estos Divs sin afectar mi otro diseño, están detrás del otro diseño. Esto funciona excepto por el hecho de que la imagen de fondo no sigue la posición divs.
Básicamente, mi pregunta es, ¿por qué no está el fondo para el posicionamiento div ranImg1 con el div pero permanece en la esquina superior izquierda, y cómo solucionarlo?

¿Fue útil?

Solución

su adjunto de fondo: fijo adjuntará la imagen de fondo en relación con la ventana del navegador. si quieres que siga "" la posición div , simplemente elimine la línea:

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

también puede establecer el atributo background-position para establecer el fondo en relación con el div que contiene:

background-position: 0px 0px;

No estoy seguro de si eso ayudaría más allá de simplemente eliminar background-attach (¡todavía no hay suficiente café!)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top