CSS/Tutorials/Hintergrund/background

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche


ToDo (weitere ToDos)

Integration dieses Artikels in die vorderen Kapitel, da er eine Dopplung zu den bestehenden Kapiteln darstellt.
--Matthias Scharwies (Diskussion) 06:12, 29. Jun. 2021 (CEST)


background-clip[Bearbeiten]

Mit der Eigenschaft background-clip können Sie bestimmen, dass die Hintergrundeigenschaften nur für bestimmte Bereiche der Elementbox gelten. [1] [2]

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Erlaubt sind dabei die folgenden Angaben:

  • border-box, (Standardwert) Hintergrund wird im Inhalts- und padding-Bereich sowie unter den Rahmen dargestellt,
  • content-box, Hintergrund wird nur im Inhaltsbereich dargestellt
  • padding-box, Hintergrund wird im Inhalts- und padding-Bereich dargestellt

Für ein tieferes Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.

Anwendungsbeispiel ansehen …
div {
        width: 20em;
        margin: 1em;
        outline: 1px solid black; 
        border: 1em dashed red; 
        padding: 1em;
        background-color: gold;
}
#one   { background-clip: border-box; }
#two   { background-clip: padding-box; }
#three { background-clip: content-box; }

In diesem Beispiel erhalten die Div-Elemente alle eine dünne schwarze Außenlinie, einen breiten gestrichelten Rahmen sowie einen goldfarbenen Hintergrund, um die verschiedenen Werte für background-clip veranschaulichen zu können.


  1. W3C: background-clip property
  2. css-tricks.com: The `background-clip` Property and its Use Cases