files/de/web/css/background-position/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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>