w3docs logo

CSS-Eigenschaft background-origin

Die CSS-Eigenschaft background-origin gibt den Hintergrundpositionierungsbereich von background-image an.

Wenn background-attachment ist "fixed", wird die Eigenschaft background-origin ignoriert und hat keine Wirkung.

Anfangswert padding-box
Gilt für Alle Element. Es gilt auch für It also applies ::first-letter und ::first-line.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.backgroundOrigin = "content-box";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 "border-box".</p>
    <div class="example1">
      <h2>Hallo Welt.</h2>
      <p> Ein Absatz zum Beispiel.</p>
    </div>
  </body>
</html>

Hier betrachten wir ein Beispiel mit 3 Werten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für die Eigenschaft Background-origin</h2>
    <p>Hier ist background-origin auf "padding-box" gesetzt, das ist der Standardwert für diese Eigenschaft.</p>
    <div class="example1">
      <h2>Hallo  Welt!</h2>
      <p> Ein Absatz zum Beispiel.</p>
    </div>
    <p>Here the background-origin is set to "content-box".</p>
    <div class="example2">
       <h2>Hallo  Welt!</h2>
      <p> Ein Absatz zum Beispiel.</p>
    </div>
    </div>
  </body>
</html>

Im folgenden Beispiel sehen Sie, wie Sie zwei Hintergrundbilder für das Element <div> mit unterschiedlichen Werten einstellen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für die Eigenschaft Background-origin</h2>
    <p>Hier ist background-origin auf content-box, border-box; gesetzt:</p>
    <div id="example1">
      <h2>Hallo Welt!</h2>
      <p>Das erste Hintergrundbild beginnt in der linken oberen Ecke des Borders.</p>
      <p>Das zweite Hintergrundbild beginnt in der linken oberen Ecke des Inhalts.</p>
    </div>
    <p>Hier ist background-origin auf content-box, padding-box gesetzt:</p>
    <div id="example2">
      <h2>Hallo Welt!</h2>
      <p>Das erste Hintergrundbild beginnt in der linken oberen Ecke der Polsterkante.</p>
      <p>Das zweite Hintergrundbild beginnt in der linken oberen Ecke des Inhalts.</p>
    </div>
    <p>Hier ist background-origin auf content-box, content-box eingestellt:</p>
    <div id="example3">
      <h2>Hallo Welt!</h2>
      <p>Beide Hintergrundbilder beginnen in der linken oberen Ecke des Inhalts.</p>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
border-box Background-position ist relativ zum Rand und background-image beginnt in der linken oberen Ecke der Polsterkante. Das ist der Standardwert.
padding-box Background-position ist relativ zum Padding-Box und background-image beginnt in der linken oberen Ecke des Borders.
content-box Background-position ist relativ zur Inhaltsbox und background-image beginnt in der linken oberen Ecke des Inhalts.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz- 		7.0+ 11.5+
10.1 -o-

Übe dein Wissen

Welche Werte kann die Eigenschaft 'background-origin' in CSS annehmen?
Finden Sie das nützlich?