aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/css/background-repeat/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
commit4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch)
treed4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/css/background-repeat/index.html
parent33058f2b292b3a581333bdfb21b8f671898c5060 (diff)
downloadtranslated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip
initial commit
Diffstat (limited to 'files/de/web/css/background-repeat/index.html')
-rw-r--r--files/de/web/css/background-repeat/index.html166
1 files changed, 166 insertions, 0 deletions
diff --git a/files/de/web/css/background-repeat/index.html b/files/de/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..7dd8a25693
--- /dev/null
+++ b/files/de/web/css/background-repeat/index.html
@@ -0,0 +1,166 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+ - CSS
+ - CSS Referenz
+translation_of: Web/CSS/background-repeat
+---
+<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>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+ &lt;li&gt;no-repeat
+ &lt;div class="one"&gt;&amp;nbsp;&lt;/div&gt;
+ &lt;/li&gt;
+ &lt;li&gt;repeat
+ &lt;div class="two"&gt;&amp;nbsp;&lt;/div&gt;
+ &lt;/li&gt;
+ &lt;li&gt;repeat-x
+ &lt;div class="three"&gt;&amp;nbsp;&lt;/div&gt;
+ &lt;/li&gt;
+ &lt;li&gt;repeat-y
+ &lt;div class="four"&gt;&amp;nbsp;&lt;/div&gt;
+ &lt;/li&gt;
+ &lt;li&gt;repeat-x, repeat-y (multiple images)
+ &lt;div class="five"&gt;&amp;nbsp;&lt;/div&gt;
+ &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+ background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+ width: 144px;
+ height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+ background-repeat: no-repeat;
+}
+.two {
+ background-repeat: repeat;
+}
+.three {
+ background-repeat: repeat-x;
+}
+.four {
+ background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+ background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+ url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+ background-repeat: repeat-x,
+ repeat-y;
+ height: 144px;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>In this example, each list item is matched with a different value of <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Beispiele', 240, 360)}}</p>
+
+<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>