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.
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.
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.
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.
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.