CSS background-origin Eigenschaft

Die CSS background-origin Eigenschaft legt den Hintergrund-Positionierungsbereich fest — das Box-Modell, von dem aus ein background-image positioniert wird und zu zeichnen beginnt.

Jedes Element besteht aus drei verschachtelten Boxen: der Content Box (wo Text und untergeordnete Elemente leben), der Padding Box (Content-Bereich plus padding) und der Border Box (Padding Box plus Rahmen). Der Wert von background-origin bestimmt, welche dieser Boxen als Ursprungspunkt (die obere linke Ecke) für das Bild dient und gegenüber welchem Bereich background-position gemessen wird.

Standardmäßig wird ein Hintergrundbild relativ zur Padding Box positioniert, sodass es hinter dem Innenabstand liegt, aber unter dem Rahmen bleibt. Durch den Wechsel zu content-box wird das Bild innerhalb des Innenabstands platziert; mit border-box kann es sich unter den Rahmen erstrecken. Verwenden Sie diese Eigenschaft, wenn ein Hintergrundbild genau am Inhalt ausgerichtet sein soll oder bewusst unter (oder hervor aus) dem Rahmen platziert werden soll.

Nicht mit background-clip verwechseln. background-origin bestimmt, wo das Bild beginnt; background-clip bestimmt, wo der gezeichnete Hintergrund abgeschnitten wird (geclippt). Beide verwenden dieselben Schlüsselwörter, beantworten aber unterschiedliche Fragen und werden häufig zusammen verwendet.

Die Eigenschaft background-origin hat keinen Effekt bei einem fixed-Hintergrund: Wenn background-attachment auf fixed gesetzt ist, wird das Bild relativ zum viewport positioniert und background-origin wird ignoriert. Sie ist eine der CSS3-Eigenschaften.

Anfangswert	padding-box
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM Syntax	object.style.backgroundOrigin = "content-box";

Syntax

Syntax der CSS background-origin Eigenschaft

background-origin: padding-box | border-box | content-box | initial | inherit;

Beispiel der background-origin Eigenschaft:

Beispiel der CSS background-origin Eigenschaft mit dem Wert padding-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box".</p>
    <div class="example1">
      <h2>Hello world.</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Hier ist ein Beispiel, das den Unterschied zwischen padding-box und content-box zeigt.

Beispiel der background-origin Eigenschaft mit den Werten "padding-box" und "content-box":

Beispiel der CSS background-origin Eigenschaft mit den Werten padding-box und content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
      .example2 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
    <div class="example1">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
    <p>Here the background-origin is set to "content-box".</p>
    <div class="example2">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Probier es selbst »

Im folgenden Beispiel sehen Sie, wie zwei Hintergrundbilder für ein div-Element mit unterschiedlichen Werten gesetzt werden.

Beispiel der background-origin Eigenschaft mit unterschiedlichen Werten:

Beispiel der CSS background-origin Eigenschaft mit den Werten content-box und border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, border-box;
      }
      #example2 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, padding-box;
      }
      #example3 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin: content-box, border-box; is set:</p>
    <div id="example1">
      <h2>Hello World</h2>
      <p>The first background-image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the border.</p>
    </div>
    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">
      <h2>Hello World</h2>
      <p>The first background image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the padding edge.</p>
    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>
    <div id="example3">
      <h2>Hello World</h2>
      <p>Both background images start from the upper left corner of the content.</p>
    </div>
  </body>
</html>

Probier es selbst »

Mehrere Hintergründe

Wenn ein Element mehrere durch Komma getrennte Hintergrundbilder hat, können Sie jedem Bild einen anderen Ursprung zuweisen — die Werte werden den Bildern der Reihe nach zugeordnet. Im obigen Beispiel gilt background-origin: content-box, border-box; für das erste Bild content-box und für das zweite border-box. Wenn Sie weniger Werte als Bilder angeben, wiederholt CSS die Liste, um die verbleibenden Bilder zu belegen.

Tipps und Fallstricke

Kein Effekt ohne Hintergrundbild. background-origin ändert nur, wo ein Bild beginnt; auf eine einfarbige Hintergrundfarbe hat es keinen Einfluss. Um zu steuern, wo eine Farbe gezeichnet wird, verwenden Sie stattdessen background-clip.
Es braucht Platz, um sichtbar zu sein. Bei null padding und ohne border fallen Content Box, Padding Box und Border Box zusammen, sodass alle drei Werte identisch aussehen. Der Effekt zeigt sich erst, wenn das Element Innenabstand und/oder einen Rahmen hat.
fixed überschreibt es. Wie oben erwähnt, macht background-attachment: fixed die Bildposition relativ zum viewport, was background-origin deaktiviert.
Kombinieren Sie es mit background-clip. Ein gängiges Muster ist background-origin: border-box; background-clip: padding-box; — das Bild wird ab dem Rahmen ausgelegt, aber an der Padding-Kante beschnitten.

Browser-Unterstützung

background-origin wird von allen modernen Browsern unterstützt — Chrome, Firefox, Safari, Edge und Opera. Für aktuelle Versionen ist kein Vendor-Präfix erforderlich.

Werte

Wert	Beschreibung	Ausprobieren
border-box	background-position ist relativ zur Border Box und das Hintergrundbild beginnt in der oberen linken Ecke des Rahmens.	Ausprobieren »
padding-box	background-position ist relativ zur Padding Box und das Hintergrundbild beginnt in der oberen linken Ecke der Padding-Kante. Dies ist der Standardwert.	Ausprobieren »
content-box	background-position ist relativ zur Content Box und das Hintergrundbild beginnt in der oberen linken Ecke des Inhalts.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt die Eigenschaft vom Elternelement.

Übungen

Übung

Was steuert die CSS background-origin Eigenschaft?

Die Ausgangsposition eines Hintergrundbildes, das durch die background-Eigenschaft festgelegt wird.Den Ort des Hintergrundbildes oder der Hintergrundfarbe in Bezug auf die Border Box, Padding Box oder Content Box des Elements.Die Auflösung des Hintergrundbildes.Die Geschwindigkeit von Übergangseffekten für ein Hintergrundbild.Sie wirkt im Zusammenspiel mit anderen Eigenschaften wie background-clip oder background-size.