Propriedade background-repeat

A propriedade background-repeat define como uma imagem de fundo de um elemento deve ser repetida. Por padrão, a imagem se repete tanto no eixo X quanto no eixo Y, cobrindo assim toda a área disponível.

Sintaxe

cssseletor {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Valores

Valor	Descrição
`no-repeat`	A imagem não será repetida de forma alguma.
`repeat-x`	A imagem será repetida ao longo do eixo X.
`repeat-y`	A imagem será repetida ao longo do eixo Y.
`repeat`	A imagem será repetida ao longo do eixo X e do eixo Y.
`space`	A imagem será repetida quantas vezes for necessário para preencher completamente a área, se isso não for possível, espaço vazio é adicionado entre as imagens.
`round`	A imagem será repetida de modo que um número inteiro de imagens caiba na área, se isso não for possível, as imagens de fundo são dimensionadas.

Valor padrão: repeat - cobre toda a tela com o padrão.

Exemplo

Por padrão, a imagem de fundo se repetirá (ladrilhará) por todo o elemento:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

Vamos fazer com que a imagem não se repita:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

Agora vamos fazer a imagem repetir ao longo do eixo X:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

Agora ao longo do eixo Y:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

As imagens repetidas ao longo dos eixos podem ser posicionadas usando a propriedade background-position:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

Vamos ver como o valor space funciona:

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

Vamos ver como o valor round funciona:

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo