Repetição da imagem de fundo CSS
CSS background-repeat
Por padrão, a background-image
propriedade repete uma imagem na horizontal e na vertical.
Algumas imagens devem ser repetidas apenas na horizontal ou na vertical, ou ficarão estranhas, assim:
Exemplo
body
{
background-image: url("gradient_bg.png");
}
Se a imagem acima for repetida apenas horizontalmente ( background-repeat: repeat-x;
), o plano de fundo ficará melhor:
Exemplo
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Dica: Para repetir uma imagem verticalmente, definabackground-repeat: repeat-y;
CSS background-repeat: sem repetição
Mostrar a imagem de fundo apenas uma vez também é especificado pela background-repeat
propriedade:
Exemplo
Mostre a imagem de fundo apenas uma vez:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
No exemplo acima, a imagem de fundo é colocada no mesmo lugar que o texto. Queremos mudar a posição da imagem, para que não perturbe muito o texto.
Posição de fundo CSS
A background-position
propriedade é usada para especificar 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;
}