Repetição de Fundo do CSS

CSS background-repeat

Por padrão,background-image A propriedade repete imagens em ambas as direções horizontal e vertical.

Alguns imagens são apropriados apenas para repetição horizontal ou vertical, senão elas parecerão estranhas, conforme mostrado a seguir:

Exemplo

body {
  background-image: url("gradient_bg.png");
}

Experimente pessoalmente

Se a imagem acima repetir apenas na direção horizontal (background-repeat: repeat-x;)，a aparência do fundo melhorará:

Exemplo

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Experimente pessoalmente

Dica:Para repetir imagens verticalmente, configure background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat A propriedade também pode especificar que a imagem de fundo seja exibida apenas uma vez:

Exemplo

Exibir a imagem de fundo apenas uma vez:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

Experimente pessoalmente

No exemplo anterior, a imagem de fundo está localizada na mesma posição que o texto. Queremos alterar a posição da imagem para evitar que a imagem interfira muito no texto.

background-position CSS

background-position A propriedade é usada para especificar a posição da imagem de fundo.

Exemplo

Coloque a imagem de fundo no canto superior direito:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Experimente pessoalmente