From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/background-repeat/index.html | 166 ++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/de/web/css/background-repeat/index.html (limited to 'files/de/web/css/background-repeat/index.html') 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 +--- +

{{ 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.
+ + + +

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

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

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;
+}
+ +

Result

+ +

In this example, each list item is matched with a different value of background-repeat.

+ +

{{EmbedLiveSample('Beispiele', 240, 360)}}

+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Versionmehrere Hintergrundbilderround und space Werte
Internet Explorer4.0------
Firefox (Gecko)1.0 (1.0)3.6 (1.9.2)---
Opera3.510.510.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" } ) }}

-- cgit v1.2.3-54-g00ecf