initial commit

1 files changed, 86 insertions, 0 deletions

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
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht:</h3>
+<p>Die <code>background-position</code> Eigenschaft bestimmt die Position des Hintergrundbildes</p>
+<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundpositionen, durch Kommata getrennt, definiert werden.<br>
+Vorherige Versionen unterstützen nur einen Wert.</div>
+<ul> <li>Standardwert: <code>0% 0%</code></li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Beziehen sich auf den Positionierungsbereich (z.B. Größe eines <code>&lt;div&gt;</code>) minus der Bildgröße</li> <li>Medium: visuell</li> <li>berechneter Wert: für &lt;Länge&gt; der absolute Wert; sonst eine Prozentzahl</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">background-position:  &lt;Hintergrundposition&gt;[, &lt;Hintergrundposition&gt;]*
+
+<strong>&lt;Hintergrundposition&gt;</strong>:
+  [ [ &lt;Prozentzahl&gt; | &lt;Länge&gt; | left | center | right ] ]
+  [ [ &lt;Prozentzahl&gt; | &lt;Länge&gt; | top | center | bottom ] ]?
+|
+  [ center | [ left | right ] [ &lt;Prozentzahl&gt; | &lt;Länge&gt; ]? ] || [ center | [ top | bottom ] [ &lt;Prozentzahl&gt; | &lt;Länge&gt; ]? ] ]
+|
+  inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<p>Möglich sind ein oder zwei Werte. Negative <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">&lt;Prozentzahlen&gt;</a> und <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">&lt;Längen&gt;</a> sind erlaubt. <br>
+Wenn nur ein Wert angegeben wird, ist der zweite automatisch <code>center</code>.<br>
+Der erste Wert gibt die horizontale, der zweite die vertikale Position an (Es sei denn, mindestens ein Wert ist ein Schlüsselwort).</p>
+<dl> <dt>&lt;Prozentwert&gt;</dt> <dd>Mit einem Wert von <code>0% 0%</code> (gleichbedeutend zu <code>0 0</code>) wird das Bild an der oberen linken Ecke ausgerichtet. <br> Mit einem Wert von <code>100% 100%</code> wird das Bild an der unteren rechten Ecke ausgerichtet. <br> Mit einem Wert von <code>50% 50%</code> wird das Bild horizontal und vertikal zentriert. <br> Die absoluten Werte werden aus der Größe des Postionierungsbereichs minus der Bildgröße berechnet (Siehe <a href="#Berechnung_der_Prozentwerte">Berechnung der Prozentwerte</a>).</dd> <dt>&lt;Länge&gt;</dt> <dd>Verschiebung vom Ursprung (obere linke Ecke)</dd> <dt>left</dt> <dd>Gleichbedeutend für <code>0%</code> für die horizontale Postion</dd> <dt>center</dt> <dd>Gleichbedeutend für <code>50%</code> für die horizontale Position, wenn diese nicht festgelegt ist, sonst gleichbedeutend für <code>50%</code> für die vertikale Postion.</dd> <dt>right</dt> <dd>Gleichbedeutend für <code>100%</code> für die horizontale Postion</dd> <dt>top</dt> <dd>Gleichbedeutend für <code>0%</code> für die vertikale Postion</dd> <dt>bottom</dt> <dd>Gleichbedeutend für <code>100%</code> für die vertikale Postion</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<h4 id="Berechnung_der_Prozentwerte">Berechnung der Prozentwerte</h4>
+<pre>.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 /*
+}
+</pre>
+<h4 id="Positionen_für_einzelne_Hintergrundbilder">Positionen für einzelne Hintergrundbilder</h4>
+<pre>.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%;
+}
+
+</pre>
+<h4 id="Positionen_für_mehrere_Hintergrundbilder_gecko_minversion_inline(1.9.2)">Positionen für mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}</h4>
+<pre>.beispielSechs {
+  background-image: url("img1.png"), url("img2.png");
+  background-position: 0px 0px, center;
+}
+
+</pre>
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> <th>mehrere Hintergrundbilder</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> </tr> </tbody>
+</table>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-position" lang="en">CSS 3 Background and Borders #background-position</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" lang="en">CSS 2.1 Colors and Backgrounds #background-position</a></li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position" } ) }}</p>