CSS/Eigenschaften/Hintergrundfarben und -bilder/background-origin

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 3.0
  • IE 9
  • Firefox
  • Safari
  • Chrome
  • Opera

Details: caniuse.com

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.

Mit der Eigenschaft background-origin können Sie dieses Verhalten beeinflussen, indem Sie den Bereich angeben, an dessen Rändern Sie die Grafiken ausrichten möchten.

Folgende Möglichkeiten stehen Ihnen zur Verfügung:

  • border-box - Ausrichtung an der Außenkante des Rahmens
  • padding-box - Ausrichtung an der Außenkante des Innabstandes (Voreinstellung)
  • content-box - Ausrichtung an der Außenkante des Bereiches für den Elementinhalt

Beispiel[Bearbeiten]

Der folgende Code richtet eine Hintergrundgrafik unten rechts im Inhaltsbereich eines Artikel-Elementes aus.

article {
    background-origin: content-box;
    background-position: right bottom;
}

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

Alle Kombinationsmöglichkeiten von background-origin und background-clip[Bearbeiten]

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.

Hinweise[Bearbeiten]

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.


Weiterführende Links[Bearbeiten]

  • background-origin in der CSS-Spezifikation: [1]