CSS, HTML und Javascript mit {stil}

CSS background-origin, background-clip

Die Position von background-image – entscheidend für Hintergrundbilder

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

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.

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