Bereich des Hintergrunds im Box-Modell

Wenn man einer Website Elemente hinzufügt, dann wird für sie eine Box generiert. Die Größe der Box beinhaltet im Normalfall den Inhaltsbereich, die Innenabstände und den Rahmen. Unter Box-Modell ist hierfür eine genauere Beschreibung vorhanden.

Wird einem Element ein Hintergrundbild oder -farbe zugewiesen, dann wird damit standardmäßig der gesamte Bereich gefüllt, der zur Boxgröße gezählt wird, vom Inhaltsbereich bis zur äußeren Rahmenkante. Wenn man das Box-Modell betrachtet, dann ist der Geltungsbereich des Hintergrunds bis zur äußeren Kante von border-box (Rahmen). Auf der folgenden Abbildung ist das Verhalten deutlich zu erkennen. Zur besseren Erkennung wurde als Rahmen eine breite Strichlinie gewählt.

Hintergrund-Bereich im Box-Modell

Es kann manchmal vorkommen, dass das Verhalten unerwünscht ist und der gewählte Hintergrund nicht bis zur äußeren Kante von border-box verlaufen soll. In dem Fall kann man mit der CSS-Eigenschaft background-clip den Hintergrund in den Bereichen padding und/oder border abschneiden. Nachfolgend ist eine Abbildung mit einem Beispielcode, bei dem der Hintergrund nur bis zur äußeren Kante von padding-box reicht.

CSS-Code mit background-clip

Werte für background-clip

Für background-clip kann man die folgenden Werte verwenden.

  • border-box (Standardwert, Hintergrund verläuft bis zur äußeren Rahmenkante)
  • padding-box (Hintergrund verläuft bis zur äußeren Kante von padding-box)
  • content-box (Hintergrund verläuft bis zur Kante des Inhaltsbereichs)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Nachfolgend sind beispielhaft einige CSS-Codes mit den Abbildungen der Browserdarstellung.

Beispiel mit dem Wert padding-box

.selektor1 {
background-color: skyblue;
background-clip: padding-box;
}

.selektor2 {
background-image: url(gruen.jpg);
background-clip: padding-box;
}

div {
margin: 2px;
padding: 20px;
width: 200px;
height: 60px;
border: 10px dashed #001055;
float: left;
}
<div class="selektor1"></div>
<div class="selektor2"></div>

Der Code bewirkt, dass der Hintergrund den Rahmenbereich nicht mehr umfasst.

background-clip: padding-box

Beispiel mit dem Wert content-box

.selektor1 {
background-color: skyblue;
background-clip: content-box;
}

.selektor2 {
background-image: url(gruen.jpg);
background-clip: content-box;
}

div {
margin: 2px;
padding: 20px;
width: 200px;
height: 60px;
border: 10px dashed #001055;
float: left;
}
<div class="selektor1"></div>
<div class="selektor2"></div>

Der Code bewirkt, dass der Hintergrund nur noch den Inhaltsbereich content-box umfasst.

background-clip: content-box

Auch wenn die Namen und die Werte ähnlich sind, unterscheiden sich die Eigenschaften background-origin und background-clip in ihrem Verhalten. Bei background-origin wird die Position des Hintergrundbildes innerhalb des Box-Modells definiert. Das bewirkt, dass die Bilder auch verschoben werden. Außerdem wird das Bild trotzdem bis zur äußeren Rahmenkante von border-box gekachelt. Aus den Abbildungen wird deutlich, dass bei den Beispielen das Hintergrundbild bei background-clip sich nicht verschiebt und nicht bis zur äußeren Kante von border-box oder padding-box reicht, sondern abgeschnitten wird.