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 Hintergrund-Bereich im Box-Modell](typo3temp/fl_realurl_image/hintergrund-bereich-im-box-modell-c9.jpg)
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 CSS-Code mit background-clip](typo3temp/fl_realurl_image/css-code-mit-background-clip-36.jpg)
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 background-clip: padding-box](typo3temp/fl_realurl_image/background-clip-padding-box-7a.jpg)
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 background-clip: content-box](typo3temp/fl_realurl_image/background-clip-content-box-ac.jpg)
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.