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.

 

Hinweis: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne -moz-) im Stylesheet notieren. Siehe Beispiele.

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

Browser ab Version Unterstützung von
Internet Explorer --- --- [*]
Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-origin: padding | border | content
4.0 (1.9.3) background-origin: padding-box | border-box | content-box
Opera 10.5 background-origin: padding-box | border-box | content-box
Safari (WebKit) 3.0 (522) -webkit-background-origin: padding | border | content
-webkit-background-origin: padding-box | border-box | content-box
  • [*]: 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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:
Mitwirkende an dieser Seite: fscholz
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden