1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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: <Hintergrundwiederholung>[, <Hintergrundwiederholung>]*
<strong><Hintergrundwiederholung></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"><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></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>
|
