mozilla

Version 499079 von background-repeat

  • Adressname der Version: Web/CSS/background-repeat
  • Titel der Version: background-repeat
  • ID der Version: 499079
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Ja
  • Kommentar 1 words added, 4 words removedCSS/background-repeat Web/CSS/background-repeat
Schlagwörter: 

Inhalt der Version

{{ CSSRef() }}

Übersicht:

Die background-repeat Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden.

Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundwiederholungen, durch Kommata getrennt, definiert werden.
Vorherige Versionen unterstützen nur einen Wert.
  • Standardwert: repeat
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt

Syntax

background-repeat:  <Hintergrundwiederholung>[, <Hintergrundwiederholung>]*

<Hintergrundwiederholung>:
repeat | repeat-x | repeat-y | no-repeat | round | space | inherit

Werte

repeat
Das Hintergrundbild wird horizontal und vertikal wiederholt.
repeat-x
Das Hintergrundbild wird nur horizontal wiederholt.
repeat-y
Das Hintergrundbild wird nur vertikal wiederholt.
no-repeat
Das Hintergrundbild wird nicht wiederholt. Nur ein Exemplar wird angezeigt.
round
{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Dabei kann das Hintergrundbild in seiner Größe angepasst werden, um auf die volle Breite bzw. Höhe des Elements ausgestreckt zu werden.
space
{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Allerdings wird die Bildgröße nicht angepasst, sondern soviel Platz zwischen den Hintergrundbildern gelassen, sodass sich der Hintergrund auf das gesamte Element verteilt.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Wiederholungen für einzelne Hintergrundbilder

.beispielEins {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}

.beispielZwei {
	background-image: url("logo.png");
	background-repeat: no-repeat;
}

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

.besipielDrei {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: repeat-x, repeat-y;
} 

Browser Kompatibilität

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

Spezifikation

Siehe auch

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

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3 id="Übersicht:">Übersicht:</h3>
<p>Die <code>background-repeat</code> Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden.</p>
<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundwiederholungen, durch Kommata getrennt, definiert werden.<br>
Vorherige Versionen unterstützen nur einen Wert.</div>
<ul> <li>Standardwert: <code>repeat</code></li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li>
</ul>
<h3 id="Syntax">Syntax</h3>
<pre class="eval">background-repeat:  &lt;Hintergrundwiederholung&gt;[, &lt;Hintergrundwiederholung&gt;]*

<strong>&lt;Hintergrundwiederholung&gt;</strong>:
repeat | repeat-x | repeat-y | no-repeat | round | space | inherit
</pre>
<h3 id="Werte">Werte</h3>
<dl> <dt>repeat</dt> <dd>Das Hintergrundbild wird horizontal und vertikal wiederholt.</dd> <dt>repeat-x</dt> <dd>Das Hintergrundbild wird nur horizontal wiederholt.</dd> <dt>repeat-y</dt> <dd>Das Hintergrundbild wird nur vertikal wiederholt.</dd> <dt>no-repeat</dt> <dd>Das Hintergrundbild wird nicht wiederholt. Nur ein Exemplar wird angezeigt.</dd> <dt>round</dt> <dd>{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Dabei kann das Hintergrundbild in seiner Größe angepasst werden, um auf die volle Breite bzw. Höhe des Elements ausgestreckt zu werden.</dd> <dt>space</dt> <dd>{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Allerdings wird die Bildgröße nicht angepasst, sondern soviel Platz zwischen den Hintergrundbildern gelassen, sodass sich der Hintergrund auf das gesamte Element verteilt.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h3 id="Beispiele">Beispiele</h3>
<h4 id="Wiederholungen_für_einzelne_Hintergrundbilder">Wiederholungen für einzelne Hintergrundbilder</h4>
<pre>.beispielEins {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}

.beispielZwei {
	background-image: url("logo.png");
	background-repeat: no-repeat;
}

</pre>
<h4 id='Wiederholungen_für_mehrere_Hintergrundbilder_{{_gecko_minversion_inline("1.9.2")_}}'>Wiederholungen für mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}</h4>
<pre>.besipielDrei {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: repeat-x, repeat-y;
} 

</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> <th><code>round</code> und <code>space</code> Werte</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> <td>---</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.5</td> <td>10.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> <td>---</td> </tr> </tbody>
</table>
<h3 id="Spezifikation">Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-repeat" lang="en">CSS 3 Background and Borders #background-repeat</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" lang="en">CSS 2.1 Colors and Backgrounds #background-repeat</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-position" title="de/CSS/background-position"><code>background-position</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-repeat", "es": "es/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}</p>
Zu dieser Version zurücksetzen