mozilla

Version 109586 von background-position

  • Adressname der Version: CSS/background-position
  • Titel der Version: background-position
  • ID der Version: 109586
  • Erstellt:
  • Autor: Michael2402
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version


Übersicht

Die Eigenschaft background-position gibt die Position des Hintergrundbildes an

Standardwert
0% 0%
Anwendbar auf
Alle Elemente
Geerbt
Nein
Medium
visual
Werte
<Prozentangabe>, <Länge>, left, center, right, top, bottom, inherit

Syntax

background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit


Werte

Wenn zwei Werte angegeben werden und nicht eindeutiog ist welcher Wert in welche Richtung gilt, so wird der Erste für die horizontale, der Zweite für die vertikale Position benutzt.

<Prozentangabe>
0% bedeutet am linken/oberen, 100% am rechten/unteren Rand.
<Länge>
Verschiebung von rechts/oben
center
Mittig
left
Am linken Rand
right
Am rechten Rand
top
Am oberen Rand
bottom
Am linken Rand
inherit
der Browser verwendet den Wert des Elternelements.


Beispiele

Ergebnis Quelltext
background-position:top left
background-position:left top
background-position:0% 0%
background-position:bottom left
background-position:left bottom
background-position:0% 100%
background-position:right
background-position:center right
background-position:right center
background-position:100% 50%
background-position:bottom right
background-position:right bottom
background-position:100% 100%

Browser-Kompatibilität

   IE
   Netscape
   Opera
   Firefox
   Konqueror
   Netscape
   Opera
   Firefox
   Konqueror
Browser Internet Explorer Netscape Opera Firefox Konqueror
Version 4 5 6 7 4 5 6 7 3 4 5 6 7 8 1 2 3 3.5.x
wird unterstützt Ja Ja Ja Ja Nein Nein Ja Ja Ja * Ja Ja Ja Ja Ja Ja Ja Ja Ja

Siehe auch

background, background-attachment, background-color, background-position, background-repeat

Quelltext der Version

<p><br>
</p>
<div class="breadcrumbs"><table width="100%"><tbody><tr>
<td style="width:33%;text-align:left"> ← <a href="de/CSS/background-image">background-repeat</a> </td>
<td style="width:33%;text-align:center"> ↑ <a href="de/CSS/background">background</a> ↑ </td>
<td style="width:33%;text-align:right"> <a href="de/CSS/background-position">background-position</a> → </td>
</tr></tbody></table></div>
<h3 name=".C3.9Cbersicht"> Übersicht </h3>
<p>Die Eigenschaft <b>background-position</b> gibt die Position des Hintergrundbildes an
</p>
<dl><dt>Standardwert</dt><dd> 0% 0%
</dd><dt>Anwendbar auf</dt><dd> Alle Elemente
</dd><dt>Geerbt</dt><dd> Nein
</dd><dt>Medium</dt><dd> visual
</dd><dt>Werte</dt><dd> &lt;Prozentangabe&gt;, &lt;Länge&gt;, left, center, right, top, bottom, inherit
</dd></dl>
<h3 name="Syntax"> Syntax </h3>
<pre>background-position: [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit</pre>
<p><br>
</p>
<h3 name="Werte"> Werte </h3>
<p>Wenn zwei Werte angegeben werden und nicht eindeutiog ist welcher Wert in welche Richtung gilt, so wird der Erste für die horizontale, der Zweite für die vertikale Position benutzt.
</p>
<dl><dt>&lt;Prozentangabe&gt;
</dt><dd> 0% bedeutet am linken/oberen, 100% am rechten/unteren Rand.
</dd><dt>&lt;Länge&gt;
</dt><dd> Verschiebung von rechts/oben
</dd><dt>center</dt><dd>Mittig
</dd><dt>left</dt><dd> Am linken Rand
</dd><dt>right</dt><dd> Am rechten Rand
</dd><dt>top</dt><dd> Am oberen Rand
</dd><dt>bottom</dt><dd> Am linken Rand
</dd><dt>inherit
</dt><dd>der Browser verwendet den Wert des Elternelements.
</dd></dl>
<p><br>
</p>
<h3 name="Beispiele"> Beispiele </h3>
<table class="standard-table" style="width:100%"> <tbody><tr>
<td class="header">Ergebnis
</td><td class="header">Quelltext
</td></tr>
<tr>
<td><div style="border:2px dotted green;width:200px; height:100px"><div style="background:lightgreen;width:50px; height:50px;margin-left:0;margin-top:0;"></div>
</div></td><td><pre>background-position:top left
background-position:left top
background-position:0% 0%</pre>
</td></tr>
<tr>
<td><div style="border:2px dotted green;width:200px; height:100px"><div style="background:lightgreen;width:50px; height:50px;margin-left:0px;margin-top:50px;"></div>
</div></td><td><pre>background-position:bottom left
background-position:left bottom
background-position:0% 100%</pre>
</td></tr>
<tr>
<td><div style="border:2px dotted green;width:200px; height:100px"><div style="background:lightgreen;width:50px; height:50px;margin-left:150px;margin-top:25px;"></div>
</div></td><td><pre>background-position:right
background-position:center right
background-position:right center
background-position:100% 50%</pre>
</td></tr>
<tr>
<td><div style="border:2px dotted green;width:200px; height:100px"><div style="background:lightgreen;width:50px; height:50px;margin-left:150px;margin-top:50px;"></div>
</div></td><td><pre>background-position:bottom right
background-position:right bottom
background-position:100% 100%</pre>
</td></tr></tbody></table>
<h3 name="Browser-Kompatibilit.C3.A4t">Browser-Kompatibilität</h3>
<pre class="eval">   <span class="comment">IE</span>
</pre><pre class="eval">   <span class="comment">Netscape</span>
</pre><pre class="eval">   <span class="comment">Opera</span>
</pre><pre class="eval">   <span class="comment">Firefox</span>
</pre><pre class="eval">   <span class="comment">Konqueror</span>
</pre><pre class="eval">   <span class="comment">Netscape</span>
</pre><pre class="eval">   <span class="comment">Opera</span>
</pre><pre class="eval">   <span class="comment">Firefox</span>
</pre><pre class="eval">   <span class="comment">Konqueror</span>
</pre><table class="standard-table" style="width:100%"> <tbody><tr> <th class="header">Browser</th> <th class="header" colspan="4">Internet Explorer</th> <th class="header" colspan="4">Netscape</th> <th class="header" colspan="6">Opera</th> <th class="header" colspan="3">Firefox</th> <th class="header" colspan="1">Konqueror</th> </tr> <tr> <th>Version</th>
 <th class="header">4</th> <th class="header">5</th> <th class="header">6</th> <th class="header">7</th>
 <th class="header">4</th> <th class="header">5</th> <th class="header">6</th> <th class="header">7</th>
 <th class="header">3</th> <th class="header">4</th> <th class="header">5</th> <th class="header">6</th> <th class="header">7</th> <th class="header">8</th>
 <th class="header">1</th> <th class="header">2</th> <th class="header">3</th>
 <th class="header">3.5.x</th> </tr> <tr> <td>wird unterstützt</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>
 <td style="background:#FF9E71">Nein</td> <td style="background:#FF9E71">Nein</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>
 <td style="background:#5FE716" title="ab Version 3.5">Ja *</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>
 <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td> <td style="background:#5FE716">Ja</td>
 <td style="background:#5FE716">Ja</td> </tr>
</tbody></table>
<h3 name="Siehe_auch">Siehe auch</h3>
<p><a href="de/CSS/background">background</a>, <a href="de/CSS/background-attachment">background-attachment</a>, <a href="de/CSS/background-color">background-color</a>, <a href="de/CSS/background-position">background-position</a>, <a href="de/CSS/background-repeat">background-repeat</a>
</p>
Zu dieser Version zurücksetzen