Propiedad background-attachment

La propiedad background-attachment establece cómo se desplaza la imagen de fondo del elemento: junto con el texto o si el texto se deslizará sobre la imagen.

Sintaxis

cssselector {
  background-attachment: fixed | scroll | local;
}

Valores

Valor	Descripción
`fixed`	La imagen de fondo permanecerá fija y el texto se deslizará sobre ella.
`scroll`	La imagen de fondo se desplazará junto con el texto.
`local`	El fondo se fija considerando el comportamiento del elemento. Si el elemento tiene desplazamiento, el fondo se desplazará con el contenido, pero el fondo que se extiende más allá de los límites del elemento permanece en su lugar.

Valor por defecto: scroll.

Ejemplo . Valor scroll

Ahora la propiedad background-attachment está establecida en el valor scroll. Desplaza el elemento verticalmente - verás cómo el texto se desplaza junto con el fondo:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Ejemplo . Valor fixed

Y ahora la propiedad background-attachment está establecida en el valor fixed. Desplaza el elemento verticalmente - verás cómo el texto se desliza sobre el fondo:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Véase también

la propiedad background,
que representa una propiedad abreviada para el fondo