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
|
---
title: background-repeat
slug: Web/CSS/background-repeat
tags:
- Referencia_CSS
translation_of: Web/CSS/background-repeat
---
<p>{{ CSSRef() }}</p>
<h3 id="Resumo" name="Resumo">Resumo</h3>
<p><code>background-repeat</code> specifies whether the image is repeated (tiled), and how.</p>
<ul>
<li>Valor inicial: repeat</li>
<li>Aplica-se a: todos os elementos</li>
<li>Herdado: não</li>
<li>Porcentagens: N/A</li>
<li>Mídia: <a href="pt/CSS/Media/Visual">visual</a></li>
<li>Valor computado: como especificado</li>
</ul>
<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>
<pre class="eval">background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
</pre>
<h3 id="Valores" name="Valores">Valores</h3>
<dl>
<dt>repeat</dt>
<dd>A imagem é repetida vertical e horizontalmente.</dd>
<dt>repeat-x</dt>
<dd>A imagem é repetida somente horizontalmente.</dd>
<dt>repeat-y</dt>
<dd>A imagem é repetida somente verticalmente.</dd>
<dt>no-repeat</dt>
<dd>A imagem não é repetida: somente uma cópia da imagem é desenhada.</dd>
</dl>
<h2 id="Exemplos">Exemplos</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('Exemplos', 240, 360)}}</p>
<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h3>
<table class="standard-table">
<tbody>
<tr>
<th>Navegador</th>
<th>Versão mais antiga</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>4</td>
</tr>
<tr>
<td>Firefox</td>
<td>1</td>
</tr>
<tr>
<td>Netscape</td>
<td>4</td>
</tr>
<tr>
<td>Opera</td>
<td>3.5</td>
</tr>
</tbody>
</table>
<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3>
<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p>
<p><span class="comment">Categorias</span></p>
<p><span class="comment">Interwiki Language Links</span></p>
<p>{{ languages( { "en": "en/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}</p>
|
