Eigenschaft background-attachment

Die Eigenschaft background-attachment legt fest, wie das Hintergrundbild eines Elements gescrollt wird: zusammen mit dem Text oder ob der Text über das Bild gleitet.

Syntax

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

Werte

Wert	Beschreibung
`fixed`	Das Hintergrundbild bleibt fixiert, während der Text darüber scrollt.
`scroll`	Das Hintergrundbild scrollt zusammen mit dem Text.
`local`	Der Hintergrund wird in Bezug auf das Verhalten des Elements fixiert. Wenn das Element einen Scrollbalken hat, wird der Hintergrund mit dem Inhalt gescrollt, aber der Hintergrund, der über die Elementgrenzen hinausragt, bleibt an Ort und Stelle.

Standardwert: scroll.

Beispiel . Wert scroll

Derzeit ist die Eigenschaft background-attachment auf den Wert scroll gesetzt. Scrollen Sie das Element vertikal - Sie werden sehen, wie der Text zusammen mit dem Hintergrund scrollt:

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;
}

Результат:

Beispiel . Wert fixed

Jetzt ist die Eigenschaft background-attachment auf den Wert fixed gesetzt. Scrollen Sie das Element vertikal - Sie werden sehen, wie der Text über den Hintergrund gleitet:

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;
}

Результат:

Siehe auch

die Eigenschaft background,
die eine Kurzschreibweise für Hintergrundeigenschaften darstellt