CSS background-origin, background-clip

background-clip – Hintergrundbild beschneiden

background-clip: text ist sicher die hervorstechenste Eigenschaft und stellt ein Hintergrundbild oder einen Verlauf auf den Bereich des Textes frei.

<div class="text-container">Text mit Hintergrund</div>

.text-container {
	font-size: 120px;
	background-image: url('greenhouse.jpg');
	background-size: cover;
	background-clip: text;
	color: transparent;
}

Wichtig ist die Transparenz für die Farbe des Textes, damit das Hintergrundbild durch den Text durchscheint.

background-clip: border-box

lässt den Hintergrund bis unter border laufen (sichtbar, wenn border-color semitransparent ist).

background-clip: padding-box

erstreckt sich bis zur inner Kante des Padding und beschneidet den Hintergrund auf den Bereich ohne border

background-clip: content-box

beschneidet den Hintergrund auf den Bereich ohne border und ohne padding.

background-clip: text

Der Hintergrund wird auf den Bereich des Textes zugeschnitten.

Eine Hintergrundfarbe erstreckt sich bis unter border. Gut zu erkennen durch die gepunktete semitransparente border: 10px dotted hsla(0,0%,90%,0.5):

.bgcolor {
   background-color: red;
   border: 10px dotted white;
   box-sizing: border-box;
   padding:20px;
   background-clip: border-box;
}

background-clip und background-image

Ein Hintergrundbild beginnt ohne weitere Angaben an der oberen linken Position von padding und erstreckt sich nicht unter border. Was man im Beispiel mit der Hintergrundfarbe nicht sehen konnte: background-clip beschneidet das Hintergrundbild.

background-clip: border-box hat ohne background-origin keine Wirkung.

background-origin – Ursprung des Hintergrunds

background-origin legt den Ursprung des Hintergrunds fest. Der Ursprung oder Nullpunkt des Hintergrunds eines Elements liegt oben links und erstreckt sich per Vorgabe bis unter eine eventuelle border.

background-origin: border-box zieht das Hintergrundbild unter die Border. background-origin: padding-box und content-box beschneiden das Hintergrundbild nicht, sondern verkleinern es.

background-clip und background-origin kombinieren

Bei der Kombination von background-origin: border-box und background-clipping: border-box erreicht der Hintergrund die vollständige Fläche des Elements und wird auch unter border fortgeführt.

background-origin:padding-box

Der Hintergrund beginnt oben links bei (0+border,0+border) und background erstreckt sich bis (bottom ./. border, right ./. border). Zu background-size zählt padding, aber nicht border.

background-origin:border-box

Der Nullpunkt des Hintergrunds liegt bei (0, 0) und background erstreckt sich bis (100%, 100%). Zur Berechnung von background-size werden sowohl border als auch padding hinzugezogen.

background-origin:content-box

Der Nullpunkt des Hintergrunds liegt oben links bei (0 + border + padding). Bei der Berechnung von background-size werden padding und border nicht einbezogen.

background-clip: padding-box

background-image oder background-color wird nicht unter dem Rahmen fortgeführt.

background-clip: border-box

background-image oder background-color wird unter dem Rahmen fortgeführt.

background-clip: content-box

background-image oder background-color wird auf nur auf die Content-Region angewendet und lässt sowohl border als auch padding aus.