Repetição de imagem de fundo CSS

Índice

Repetição de plano de fundo CSS

Por padrão, a propriedade background-image repete uma imagem tanto horizontal quanto verticalmente.

Algumas imagens devem ser repetidas apenas na horizontal ou na vertical, ou ficarão estranhas, assim:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

Se a imagem acima for repetida apenas horizontalmente (background-repeat: repeat-x;), o fundo ficará melhorar:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

Dica: para repetir uma imagem verticalmente, defina background-repeat: repeat-y;

Repetição em segundo plano CSS: sem repetição

Mostrar a imagem de fundo apenas uma vez também é especificado pela propriedade background-repeat:

Exemplo

Mostre a imagem de fundo apenas uma vez:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image only shows once, but it is disturbing the reader!</p>

</body>
</html>

No exemplo acima, a imagem de fundo é colocada no mesmo lugar que o texto. Queremos mudar a posição da imagem, para que ela não perturbar demais o texto.

Posição de fundo CSS

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

Exemplo

Posicione a imagem de fundo no canto superior direito:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

As propriedades de repetição e posição do plano de fundo CSS

background-position: Define a posição inicial de uma imagem de fundo
background-repeat: Define como uma imagem de fundo será repetida