mozilla

Version 109579 von background-repeat

  • Adressname der Version: CSS/background-repeat
  • Titel der Version: background-repeat
  • ID der Version: 109579
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar 294 words added, 156 words removed
Schlagwörter: 

Inhalt der Version

Ü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
  • Werte: repeat | repeat-x | repeat-y | no-repeat | inherit

Syntax

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

<Hintergrundwiederholung>:
repeat | repeat-x | repeat-y | no-repeat | 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.
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 Ab Gecko 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
Internet Explorer 4.0 ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2)
Opera 3.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

<h3>Ü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>Werte: <code>repeat</code> | <code>repeat-x</code> | <code>repeat-y</code> | <code>no-repeat</code> | <a href="/de/CSS/inherit"><code>inherit</code></a></li>
</ul>
<h3>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 | inherit
</pre>
<h3>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>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h3>Beispiele</h3>
<h4>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>Wiederholungen für mehrere Hintergrundbilder <span style="border: 1px solid rgb(129, 129, 81); padding: 2px; background-color: rgb(255, 255, 225); font-size: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span></h4>
<pre>.besipielDrei {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: repeat-x, repeat-y;
} 

</pre>
<h3>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>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> </tr> </tbody>
</table>
<h3>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>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-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-position" title="de/CSS/background-position"><code>background-position</code></a></li> <li><a href="/de/CSS/-moz-background-size" title="de/CSS/-moz-background-size"><code>-moz-background-size</code></a>, <a href="/de/CSS/-moz-background-origin" title="de/CSS/-moz-background-origin"><code>-moz-background-origin</code></a>, <a href="/de/CSS/-moz-background-clip" title="de/CSS/-moz-background-clip"><code>-moz-background-clip</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