Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Version 109592 von background-position

  • Adressname der Version: CSS/background-position
  • Titel der Version: background-position
  • ID der Version: 109592
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar +ja, +pt; 25 words added, 2 words removed

Inhalt der Version

{{ 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.
  • Standardwert: 0% 0%
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Beziehen sich auf den Positionierungsbereich (z.B. Größe eines <div>) minus der Bildgröße
  • Medium: visuell
  • berechneter Wert: für <Länge> der absolute Wert; sonst eine Prozentzahl

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", "ja": "ja/CSS/background-position", "pl": "pl/CSS/background-position", "pt": "pt/CSS/background-position", "es": "es/CSS/background-position" }) }}

Quelltext der Version

<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> <div>{{ languages( {
"en": "en/CSS/background-position",
"fr": "fr/CSS/background-position",
"ja": "ja/CSS/background-position",
"pl": "pl/CSS/background-position",
"pt": "pt/CSS/background-position",
"es": "es/CSS/background-position"
}) }}</div>
Zu dieser Version zurücksetzen