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

Standardwert

padding-box

anwendbar auf

alle Elemente

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.

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.

Siehe auch

• CSS/Tutorials/Hintergrund/Gestaltung mit CSS

Weblinks

• Spezifikation (W3C): background-origin