CSS 2.1: `background-attachment`

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

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.