From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/background-origin/index.html | 60 +++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 files/de/web/css/background-origin/index.html (limited to 'files/de/web/css/background-origin/index.html') diff --git a/files/de/web/css/background-origin/index.html b/files/de/web/css/background-origin/index.html new file mode 100644 index 0000000000..694b12b3e4 --- /dev/null +++ b/files/de/web/css/background-origin/index.html @@ -0,0 +1,60 @@ +--- +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" } ) }}

-- cgit v1.2.3-54-g00ecf