CSS/Eigenschaften/background-origin

Die Eigenschaft background-origin verschiebt den Ursprung für das Koordinatensystem, welches der Positionierung der Hintergrundgrafiken zugrunde liegt, für jede einzelne Hintergrundgrafik.

Standardmäßig werden Hintergrundgrafiken im oberen linken Bereich eines Elementes angezeigt, bzw. von dort aus gekachelt. Der exakte Ursprung (engl. origin) bzw. Ausgangspunkt für die Positionierung ist die linke, obere Ecke innerhalb des Rahmens

erlaubte Werte	padding-box border-box content-box Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: padding-box
anwendbar auf	alle Elemente
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

article {
    background-image: url(...);
    background-origin: content-box;
    background-position: right bottom;
}

Der Code richtet eine Hintergrundgrafik unten rechts im Inhaltsbereich eines article-Elements aus.

Das funktioniert auch für mehrere Hintergrundgrafiken. Dann sind mehrere Werte kommagetrennt anzugeben. Im Zusammenspiel mit background-clip ergeben sich vielfältige Gestaltungsmöglichkeiten.

Besonders interessant und vielfältig sind die Einflussmöglichkeiten auf Hintergrundgrafiken, wenn Sie für background-origin und background-clip gezielt eigene Angaben machen.

Beispiel ansehen …

Dieses Beispiel zeigt alle Kombinationen von background-clip und background-origin. Die div-Elemente haben alle eine dünne Außenlinie, einen breiten teiltransparenten Rahmen sowie einen breiten Innenabstand.

ansehen …

Beachten Sie: Wenn Sie in der Kurzschreibweise für Hintergründe (background) einen Wert angeben, setzen Sie diesen automatisch für background-origin und background-clip.

background-origin wird nicht beachtet, wenn background-attachment:fixed gesetzt ist.

Weblinks

• Spezifikation (W3C): background-origin

Siehe auch

• CSS/Tutorials/Hintergrund/Gestaltung mit CSS