CSS background-origin, background-clip

CSS background-origin / background-clip Position des Hintergrundbilds und Beschneiden

background-origin und background-clip bestimmen die Reichweite und die Position von Hintergrundbildern mit border-box, padding-box, content-box.

background-clip beschneidet das Hintergrundbild, background-origin legt den Ursprung des Hintergrunds fest.

Background Image – von wo bis wo?

Der Ursprung oder Nullpunkt des Hintergrunds eines Elements liegt oben links und erstreckt sich per Vorgabe bis unter eine eventuelle border.

Darstellung von border-box, padding-box und content-box

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.
background-origin: padding-box
background-origin: border-box
background-origin: content-box
background-clip: padding-box
background-clip: border-box
background-clip: content-box
(0,0)border-boxpadding-boxcontent-box