Position des Hintergrundbilds im Box-Modell

Alle Elemente einer Website nehmen ihren Platz in Form einer Box ein. Zu einer Box zählt der Inhaltsbereich, die Innenabstände und der Rahmen, die standardmäßig allesamt zur Größe der Box hinzugezählt werden. Die Beschreibung hierfür ist unter Box-Modell verfügbar. Wenn man einem Element ein Hintergrundbild zuweist, dann ist die Start-Position zum Kacheln des Bildes standardmäßig an der linken oberen Ecke der Box (sofern mit background-position nichts anderes festgelegt wurde).

Wenn man das genauer betrachtet, dann ist die Startposition innerhalb des Box-Modells standardmäßig an der linken oberen Ecke von padding-box und es wird von da an begonnen, das Hintergrundbild in alle vier Richtungen zu kacheln. Das Verhalten ist auf der folgenden Abbildung deutlich sichtbar. Von der inneren Rahmenkante aus wird das Bild nach rechts, links, oben und unten gekachelt, weshalb z.B. auf der linken und oberen Seite die Teilstriche des Hintergrundbildes zu sehen sind.

Hintergrundbild-Position im Box-Modell

Es kann durchaus vorkommen, dass man für das Hintergrundbild eine andere Position innerhalb des Box-Modells angeben und z.B. auf border-box umstellen möchte. Hierfür kann die Eigenschaft background-origin verwendet werden. Auf der folgenden Abbildung ist ein Beispiel, aus der man die Syntax herauslesen kann.

CSS-Code mit background-origin

Werte für background-origin

Die folgenden Werte können für background-origin angegeben werden.

  • padding-box (Standardwert, Bild wird an der oberen linken Ecke von padding-box positioniert)
  • border-box (Bild wird an der oberen linken Ecke von border-box positioniert)
  • content-box (Bild wird an der oberen linken Ecke des Inhaltsbereichs positioniert)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Nachfolgend sind ein paar Beispielcodes und Abbildungen von der Darstellung im Browser.

Beispiel mit dem Wert border-box

.selektor {
background-image: url(gruen.jpg);
background-origin: border-box;
}

div {
padding: 20px;
border: 10px dashed #001055;
width: 230px;
height: 60px;
}
<div class="selektor">
</div>

Der CSS-Code bewirkt, dass die Position des Hintergrundbilds zur linken oberen Ecke des Rahmens verschoben wird.

background-origin: border-box

Beispiel mit dem Wert content-box

.selektor {
background-image: url(gruen.jpg);
background-origin: content-box;
}

div {
padding: 20px;
border: 10px dashed #001055;
width: 230px;
height: 60px;
}
<div class="selektor">
</div>

Mit dem Wert content-box wird die Position des Hintergrundbilds zur oberen linken Ecke des Inhaltsbereichs verschoben.

background-origin: content-box

Neben der Eigenschaft background-origin hat die Eigenschaft background-position einen Einfluss auf die Position.