Propiedad background-attachment

Ejemplos de uso

La propiedad background-attachment controla si la imagen de fondo establecida en un elemento se mueve o permanece fija cuando se hace scroll en la ventana del navegador.

Por defecto, las imágenes de fondo se mueven con el elemento en el que se muestran. El siguiente ejemplo muestra una imagen de fondo que se repite en toda la superficie del elemento. Si haces scroll en la ventana del navegador, verás que la imagen de fondo se mueve con el elemento:

Este comportamiento por defecto corresponde al valor scroll de la propiedad background-attachment. Sin embargo, el valor fixed modifica por completo este comportamiento.

En el siguiente ejemplo, la imagen de fondo permanece fija cuando se hace scroll en la ventana del navegador. Prueba a subir y bajar los contenidos de la ventana del navegador y verás las diferencias visuales tan evidentes respecto del ejemplo anterior:

div {
  background-image: url("images/imagen_pequena.png");
  background-attachment: fixed;
}

El mecanismo de las imágenes de fondo fijas es bastante limitado, ya que cada página sólo dispone de un nivel de scroll para mostrar las imágenes fijas. En otras palabras, si se utilizan propiedades como overflow para añadir barras de scroll en un elemento, su imagen de fondo fija no se comporta de la manera esperada al hacer scroll sobre el propio elemento:

div {
  background-image: url("images/imagen_pequena.png");
  background-attachment: fixed;
  overflow: scroll;
}