Exemplo
Repetir uma imagem de fundo apenas na vertical:
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade background-repeat define se / como uma imagem de fundo será repetida.
Por padrão, um background-image é repetido tanto vertical como horizontalmente.
Tip: A imagem de fundo é colocado de acordo com a propriedade background-position. Se nenhum background-position for especificado, a imagem é sempre colocado no canto superior esquerdo do elemento.
| Valor padrão: | repeat |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS1 |
| sintaxe JavaScript: | object .style.backgroundRepeat="repeat-x" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3,5 |
Note: IE8 e anteriores não suportam várias imagens de fundo de um elemento.
CSS Syntax
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| repeat | A imagem de fundo será repetida verticalmente e horizontalmente. Este é o padrão | Jogue " |
| repeat-x | A imagem de fundo será repetida apenas horizontalmente | Jogue " |
| repeat-y | A imagem de fundo será repetida apenas na vertical | Jogue " |
| no-repeat | A imagem de fundo não será repetido | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Como repetir uma imagem de fundo tanto vertical como horizontalmente (padrão para imagens de fundo):
body
{
background-image: url("paper.gif");
}
Tente você mesmo " Exemplo
Repetir uma imagem de fundo apenas horizontalmente:
body
{
background-image: url("paper.gif");
background-repeat: repeat-x;
}
Tente você mesmo " Exemplo
Exibir uma imagem de fundo apenas uma vez, com no-repeat:
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
Tente você mesmo " Páginas relacionadas
CSS tutorial: Background CSS
Referência CSS: propriedade background-position
HTML DOM de referência: backgroundRepeat property