CSS background-attachment – Referenz, Beispiel und Labor

stylesheet.css · background-attachment

.probe {
  background-attachment: local;
}

Zeile 1 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 2 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 3 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 4 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 5 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 6 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 7 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 8 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 9 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 10 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 11 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 12 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 13 – scrollen, um zu sehen, ob die Grafik mitläuft.

Zeile 14 – scrollen, um zu sehen, ob die Grafik mitläuft.

berechneter Wertbackground-attachment: local

Box-Breite–

Box-Höhe–

Erläuterungen

(attachment = Anhang, Zuordnung)

Die Eigenschaft background-attachment ist ein Teil der Kurzschrift- Eigenschaft background. Sie bestimmt, wo ein Hintergrund-Image 'angehängt' wird: entweder an den Inhalt einer Seite oder an das Fenster eines Anwendungsprogramms, meistens ein Browser.

Alle Hintergrundeigenschaften unterlegen die Fläche des Inhalts eines Elements, die padding-Fläche und die durch den Rahmen eines Elementes belegte Fläche.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'background-attachment'
scroll | fixed | inherit

scroll (Ausgangswert): Das Hintergrundbild scrollt gemeinsam mit dem Inhalt der Seite, d. h. es ist virtuell am Seiteninhalt ausgerichtet.
fixed: Das Hintergrundbild behält seinen fixen Standort, unabhängig vom Scrollverhalten des Benutzers, bei, d. h. es ist am Browserfenster (=viewport) ausgerichtet.; Alle Hintergrundbilder, für die fixed definiert ist, werden laut Spezifikation am Browserfenster ausgerichtet – nicht an dem Element, auf das sie sich beziehen. Deshalb ist es möglich, dass eine feste, nicht wiederholte Hintergrundgrafik trotz korrekter Syntax nicht dargestellt wird, weil sie sich an einer anderen Stelle auf dem Bildschirm befindet wie das zugehörige Element. Scrollt das Element dann über die Stelle, an der das Hintergrundbild steht, wird dieses 'sichtbar'. Dieses Verhalten des Browsers kann insbesondere bei kleinräumigen Elementen wie Überschriften auftreten, ist aber absolut korrekt. Abhilfe bringt hier, mit der Eigenschaft background-repeat eine Wiederholung des Hintergrundbildes einzustellen.; Nach der Spezifikation ist es einem Browser erlaubt, den Wert fixed wie den Wert scroll zu behandeln, d. h. fixed hat in dem Fall keine Bedeutung. Es wird aber empfohlen, fixed mindestens für die Elemente BODY und HTML korrekt zu interpretieren.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

BODY {background-attachment: fixed;}

Browserunterstützung

Die Eigenschaft backgrond-attachment wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x, IE/Win 6: IE/Win interpretiert den Wert fixed nur am Element body korrekt, Abhilfe per JavaScript ist aber möglich. Ferner ignoriert er den Wert inherit.
IE 7: IE 7 erkennt den Wert fixed korrekt, ignoriert aber den Wert inherit.
Opera 7.x: Opera bis Version 7 ignoriert den Wert inherit. Von Version 8 an wird der Wert erkannt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

background, background-color, background-image, background-position, background-repeat

Woran das Bild hängt

Der Unterschied zwischen den beiden Werten ist ein Unterschied im Bezugsrahmen. Beim Ausgangswert gehört das Bild zum Element und wandert mit ihm, wenn die Seite gerollt wird. Beim anderen Wert bezieht es sich auf den sichtbaren Ausschnitt und bleibt stehen, während der Inhalt darüber hinwegzieht.

Dabei bleibt das Element der Ausschnitt, durch den man das Bild sieht. Das Bild ist nicht am Element befestigt, es wird nur dort sichtbar, wo das Element gerade steht. Bei einem Element, das kleiner ist als das Fenster, sieht man deshalb beim Rollen unterschiedliche Ausschnitte desselben Bildes.

Auch die Positionierung folgt diesem Bezug: Eine Angabe für die Mitte meint bei einem feststehenden Bild die Mitte des sichtbaren Ausschnitts, nicht die Mitte des Elements.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: scroll
Berechneter Wert: Spezifizierter Wert
Vererbung: Nein
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft background-attachment