CSS/Eigenschaften/background-origin

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Background-origin)
Wechseln zu: Navigation, Suche

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 (Unterschied Tag Element Attribut)
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.

Darstellung des CSS Box-Modells 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.

Weblinks

Siehe auch