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-position/index.html | 86 +++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 files/de/web/css/background-position/index.html (limited to 'files/de/web/css/background-position') diff --git a/files/de/web/css/background-position/index.html b/files/de/web/css/background-position/index.html new file mode 100644 index 0000000000..03c3c64c4e --- /dev/null +++ b/files/de/web/css/background-position/index.html @@ -0,0 +1,86 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-position +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die background-position Eigenschaft bestimmt die Position des Hintergrundbildes

+
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundpositionen, durch Kommata getrennt, definiert werden.
+Vorherige Versionen unterstützen nur einen Wert.
+ +

Syntax

+
background-position:  <Hintergrundposition>[, <Hintergrundposition>]*
+
+<Hintergrundposition>:
+  [ [ <Prozentzahl> | <Länge> | left | center | right ] ]
+  [ [ <Prozentzahl> | <Länge> | top | center | bottom ] ]?
+|
+  [ center | [ left | right ] [ <Prozentzahl> | <Länge> ]? ] || [ center | [ top | bottom ] [ <Prozentzahl> | <Länge> ]? ] ]
+|
+  inherit
+
+

Werte

+

Möglich sind ein oder zwei Werte. Negative <Prozentzahlen> und <Längen> sind erlaubt.
+Wenn nur ein Wert angegeben wird, ist der zweite automatisch center.
+Der erste Wert gibt die horizontale, der zweite die vertikale Position an (Es sei denn, mindestens ein Wert ist ein Schlüsselwort).

+
<Prozentwert>
Mit einem Wert von 0% 0% (gleichbedeutend zu 0 0) wird das Bild an der oberen linken Ecke ausgerichtet.
Mit einem Wert von 100% 100% wird das Bild an der unteren rechten Ecke ausgerichtet.
Mit einem Wert von 50% 50% wird das Bild horizontal und vertikal zentriert.
Die absoluten Werte werden aus der Größe des Postionierungsbereichs minus der Bildgröße berechnet (Siehe Berechnung der Prozentwerte).
<Länge>
Verschiebung vom Ursprung (obere linke Ecke)
left
Gleichbedeutend für 0% für die horizontale Postion
center
Gleichbedeutend für 50% für die horizontale Position, wenn diese nicht festgelegt ist, sonst gleichbedeutend für 50% für die vertikale Postion.
right
Gleichbedeutend für 100% für die horizontale Postion
top
Gleichbedeutend für 0% für die vertikale Postion
bottom
Gleichbedeutend für 100% für die vertikale Postion
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+

Berechnung der Prozentwerte

+
.beispielNull {
+  width: 320px;                   /* 50% der Bereichsbreite = 160px  */
+  height: 320px;                  /* 50% Bereichshöhe = 160px  */
+
+  background-image: url(32x32.jpg)/* 50% der Bildbreite/Bildhöhe = 16px  */
+
+  background-position: 50% 50%;   /* 160px-16px = 144px */
+                                  /* 50% 50% entspricht also: 144px 144px /*
+}
+
+

Positionen für einzelne Hintergrundbilder

+
.beispielEins {
+  background-image: url("logo.png");
+  background-position: top;
+}
+
+.beispielZwei {
+  background-image: url("logo.png");
+  background-position: 25% 75%;
+}
+
+.beispielDrei {
+  background: url("logo.png") 2cm bottom;
+}
+
+.beispielVier {
+  background-image: url("logo.png");
+  background-position: center 10%;
+}
+
+.beispielFuenf {
+  background: url("logo.png") 3em 50%;
+}
+
+
+

Positionen für mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}

+
.beispielSechs {
+  background-image: url("img1.png"), url("img2.png");
+  background-position: 0px 0px, center;
+}
+
+
+

Browser Kompatibilität

+ +
Browser ab Version mehrere Hintergrundbilder
Internet Explorer 4.0 ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 10.5
Safari (WebKit) 1.0 (85) 1.3 (312)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position" } ) }}

-- cgit v1.2.3-54-g00ecf