Esta tradução não está completa. Por favor ajude a traduzir este artigo a partir do Inglês.
Resumo
background-repeat specifies whether the image is repeated (tiled), and how.
- Valor inicial: repeat
- Aplica-se a: todos os elementos
- Herdado: não
- Porcentagens: N/A
- Mídia: visual
- Valor computado: como especificado
Sintaxe
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
Valores
- repeat
- A imagem é repetida vertical e horizontalmente.
- repeat-x
- A imagem é repetida somente horizontalmente.
- repeat-y
- A imagem é repetida somente verticalmente.
- no-repeat
- A imagem não é repetida: somente uma cópia da imagem é desenhada.
Exemplos
HTML
<ol>
<li>no-repeat
<div class="one"> </div>
</li>
<li>repeat
<div class="two"> </div>
</li>
<li>repeat-x
<div class="three"> </div>
</li>
<li>repeat-y
<div class="four"> </div>
</li>
<li>repeat-x, repeat-y (multiple images)
<div class="five"> </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.
Compatibilidade com navegadores
| Navegador | Versão mais antiga |
|---|---|
| Internet Explorer | 4 |
| Firefox | 1 |
| Netscape | 4 |
| Opera | 3.5 |
Veja também
background, background-attachment, background-color, background-image, background-position, background-repeat
Categorias
Interwiki Language Links