Propriedade CSS background-repeat

A propriedade background-repeat controla como uma imagem de fundo é repetida ao longo da área de pintura de um elemento. Por padrão, uma imagem de fundo é pequena demais para cobrir um elemento inteiro, por isso o navegador a repete como papel de parede — em ambos os eixos — até que a caixa esteja preenchida.

Esta página abrange todos os valores de background-repeat, quando usar cada um deles e a diferença sutil entre space e round (os dois valores que as pessoas mais confundem).

Os valores se dividem em três grupos:

Repetir ou não: repeat (o padrão) repete em ambas as direções; no-repeat exibe a imagem apenas uma vez.
Repetir em um eixo: repeat-x repete apenas horizontalmente; repeat-y repete apenas verticalmente.
Repetir sem tiles parciais: space mantém cada tile inteiro e distribui o espaço extra como lacunas entre eles; round estica ou reduz os tiles para que um número inteiro deles caiba sem lacunas.

background-repeat funciona em conjunto com background-image (que fornece a imagem) e background-position (que define o ponto de partida da repetição). Também é um dos valores que você pode definir com o atalho background.

Quando usar?

no-repeat é o mais comum em layouts modernos — uma única foto de herói, logotipo ou ícone que você então dimensiona com background-size e posiciona com background-position.
repeat é ideal para texturas e padrões contínuos (textura de papel, ruído, grades de pontos) onde você quer que preencham qualquer tamanho de caixa.
repeat-x / repeat-y são adequados para faixas decorativas: uma borda superior repetida, um divisor vertical ou um gradiente que deve se repetir ao longo de um eixo.
space / round são importantes quando a imagem tem bordas bem definidas (como ladrilhos ou miniaturas) e você não quer que sejam cortadas onde a borda da caixa cai no meio de um tile.

Informação

By default, the image will be displayed in the top left corner without background-position property.

Initial Value	repeat
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	element.style.backgroundRepeat = "repeat-x";

Sintaxe

Sintaxe da propriedade CSS background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;

Exemplo da propriedade background-repeat:

Exemplo da propriedade CSS background-repeat com o valor repeat

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

No exemplo a seguir, a imagem de fundo é exibida apenas uma vez porque no-repeat está definido.

Exemplo da propriedade background-repeat com o valor "no-repeat":

Exemplo da propriedade CSS background-repeat com o valor no-repeat

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Experimente Você Mesmo »

No próximo exemplo, a background-image é repetida apenas horizontalmente.

Exemplo da propriedade background-repeat com o valor "repeat-x":

Exemplo da propriedade CSS background-repeat com o valor repeat-x

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Experimente Você Mesmo »

Aqui, o valor "repeat-y" faz a imagem ser repetida apenas verticalmente.

Exemplo da propriedade background-repeat com o valor "repeat-y":

Exemplo da propriedade CSS background-repeat com o valor repeat-y

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Experimente Você Mesmo »

Com space, a imagem mantém seu tamanho original — o navegador encaixa o máximo de tiles inteiros que couberem e distribui o espaço restante como lacunas iguais entre eles, de modo que nenhum tile seja cortado.

Exemplo da propriedade background-repeat com o valor "space":

Exemplo da propriedade CSS background-repeat com o valor space

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
        background-repeat: space;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Experimente Você Mesmo »

Com round, não há lacunas: o navegador redimensiona a imagem para cima ou para baixo de modo que um número inteiro de tiles preencha exatamente a área. Isso pode distorcer ligeiramente a imagem, que é a troca que round faz para evitar lacunas.

Exemplo da propriedade background-repeat com o valor "round":

Exemplo da propriedade CSS background-repeat com o valor round

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
        background-repeat: round;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
repeat	A imagem de fundo é repetida horizontal e verticalmente. Este é o valor padrão.	Experimente »
repeat-x	A imagem de fundo é repetida apenas horizontalmente.	Experimente »
repeat-y	A imagem de fundo é repetida apenas verticalmente.	Experimente »
no-repeat	A imagem de fundo não é repetida.	Experimente »
space	A imagem é repetida o maior número de vezes inteiras que couber sem ser cortada; o espaço restante é distribuído como lacunas iguais entre os tiles (o primeiro e o último tile tocam as bordas).	Experimente »
round	A imagem é redimensionada para que um número inteiro de tiles preencha a área sem lacunas; os tiles são esticados ou comprimidos para se encaixarem.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Erros comuns

space e round são valores reais. Ambos fazem parte do padrão e repetem sem tiles parciais — space adiciona lacunas, round redimensiona a imagem.
no-repeat não redimensiona a imagem. Para fazer uma única imagem cobrir a caixa, combine no-repeat com background-size.
Position define onde a repetição começa. Ao repetir, background-position desloca toda a grade de tiles, por isso duas repetições podem parecer diferentes mesmo com a mesma imagem — defina background-position intencionalmente.
A sintaxe de dois valores também existe. Você pode passar uma palavra-chave por eixo, por exemplo background-repeat: repeat-x; é equivalente a background-repeat: repeat no-repeat;.

Prática

Quais destes são valores válidos para a propriedade CSS 'background-repeat'?

Prática

Qual valor repete a imagem sem cortes, adicionando lacunas iguais entre tiles inteiros?

spaceroundrepeatno-repeat