CSS background-origin, background-clip

Background Image – von wo bis wo?

background-clip beschneidet das Hintergrundbild, 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-clip

• background-clip: border-box lässt den Hintergrund bis unter border laufen.
• background-clip: padding-box beschneidet den Hintergrund auf den Bereich ohne border
• background-clip: content-box beschneidet den Hintergrund auf den Bereich ohne border und ohne padding.

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

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.