--- title: background-origin slug: Web/CSS/background-origin tags: - CSS - CSS Referenz translation_of: Web/CSS/background-origin ---

{{ CSSRef() }}

Ü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.

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 {{ gecko_minversion_inline("2.0") }} 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 {{ gecko_minversion_inline("2.0") }} 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 {{ gecko_minversion_inline("2.0") }} 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 {{ gecko_minversion_inline("1.9.2") }}

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

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/background-origin", "fr": "fr/CSS/-moz-background-origin", "ja": "ja/CSS/-moz-background-origin", "pl": "pl/CSS/-moz-background-origin" } ) }}