background-origin

Übersicht

Die background-origin Eigenschaft legt den Bereich des Hintergrundbildes fest (bzw. den Ausgangspunkt eines background-image). background-origin hat keinen Effekt, wenn background-attachment auf fixed gesetzt wurde. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.

Die Eigenschaft -moz-background-origin wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.

Der Wert dieser Eigenschaft wird durch die Kurzformeigenschaft background auf den Standardwert (padding-box) zurückgesetzt.

• Standardwert: padding-box
• Anwendbar auf: alle Elemente
• Vererbbar: Nein
• Prozentwerte: Nein
• Medium: visuell
• berechneter Wert: wie festgelegt

Syntax

/* seit Gecko 2.0 (Firefox 4.0) */
background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*

/* ältere Versionen (mehrere Hintergründe seit Gecko 1.9.2 / Firefox 3.6) */
-moz-background-origin: [padding | border | content][, [border | padding | content]]*

Werte

padding-box bzw. padding (Firefox 1.0-3.6)

Standardwert. Die Hintergrundposition ist relativ zum padding. (Für einzelne Boxen ist "0 0" die obere linke Ecke der padding edge und "100% 100%" ist die untere rechte Ecke.)

border-box bzw. border (Firefox 1.0-3.6)

Die Hintergrundposition ist relativ zum Rahmen (border), sodass sich das Hintergrundbild hinter dem Rahmen befinden kann.

content-box bzw. content (Firefox 1.0-3.6)

Die Hintergrundposition ist relativ zum Inhalt.

Beispiele

Hintergrundbild im padding-Bereich

 .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   -moz-background-origin: content;          /* Firefox 1.0-3.6 */
   -webkit-background-origin: content-box;   /* Safari, Chrome */
           background-origin: content-box;   /* Firefox 4.0+ */
}

Mehrere Hintergrundbilder

div {
  background-image: url('mainback.png'), url('logo.jpg');
  background-position: 0px 0px, top right;
  -moz-background-origin: padding, content;
  -webkit-background-origin: padding-box, content-box;
          background-origin: padding-box, content-box;
}

Browser Kompatibilität

• [*]: Der Standardwert ist bis einschließlich IE7 border-box.
• Der IE8 kennt padding-box als Standard.
• Konqueror 3.5.4 unterstützt -khtml-background-origin.

Spezifikation

• CSS 3 Backgrounds and Borders #background-origin
  (Standardisiert sind padding-box, border-box, und content-box)

Siehe auch

• background, background-attachment, background-color, background-clip, background-image, background-position, background-repeat, background-size
• -moz-background-inline-policy