Repita de fundo no CSS

Quando definirmos uma imagem de fundo em qualquer página da web por padrão, a imagem será colocada no canto superior esquerdo e será repetida nas direções horizontal e vertical. CSS fornece uma propriedade de repetição de fundo para gerenciar o comportamento de repetição da imagem.

Podemos executar as seguintes funcionalidades usando a propriedade de repetição de fundo:

• sem repetir evita a repetição da imagem.
• repetição-x repete uma imagem em uma direção horizontal.
• repetir-se repete uma imagem em uma direção vertical.
• espaço repete a imagem sem recorte e adicionar espaço entre cada repetição
• redondo repete e estica a imagem sem adicionar espaço

Este artigo discutirá todos os valores de propriedade de fundo acima mencionados com exemplos.

Exemplo
Vamos começar com a propriedade de imagem de fundo padrão.

O trecho acima fornecerá a seguinte saída:

Então, por padrão, a propriedade da imagem de fundo repetiu a imagem horizontalmente e verticalmente.

valor sem repetição

Vamos ver o que acontecerá quando um valor “Sem repetir” será atribuído à propriedade Repele Repatientar em segundo plano:

Agora a imagem de fundo aparecerá apenas uma vez. Este exemplo fornece a seguinte saída:

Valor de repetição-x

Agora vamos atribuir “Repetir-x” para a propriedade de repetição de fundo e observe como ela funciona:

Vamos observar o impacto de "repetição-x" na imagem de fundo na saída a seguir:

Da saída acima, fica claro que “Repetir-x” repete a imagem apenas horizontalmente.

Valor de repetição

Da mesma forma, vamos atribuir o repetir-se valor para a propriedade de repetição de fundo:

A parte acima dada de código produzirá a seguinte saída:

A saída verifica que repetir-se repetiu a imagem verticalmente apenas.

valor espacial

Vamos utilizar o "espaço" Valor da propriedade de repetição de fundo para adicionar os espaços uniformes entre as imagens:

O script acima fornecerá a seguinte saída:

valor redondo

Atribuir o valor "redondo" à propriedade de repetição de fundo se encaixará na imagem de acordo com o tamanho da tela:

Como resultado, obteremos a seguinte saída:

Imagem de fundo múltiplo repetir

No CSS, várias imagens de fundo podem ser adicionadas a um elemento e o exemplo abaixo dado elaborará como controlar o comportamento de repetição de várias imagens usando a propriedade de repetição de fundo:

No código acima, a propriedade de imagem de fundo leva dois URLs para adicionar duas imagens em segundo plano. Na linha seguinte, a propriedade de repetição de fundo também especifica dois valores i.e. Repita-y, repetir-x. Repita-y irá repetir a primeira imagem verticalmente, enquanto a repetição-x repetirá a segunda imagem horizontalmente:

Conclusão

A propriedade de repetição de fundo controla o comportamento de repetição da imagem de fundo. Ele determina se uma imagem de fundo se repetirá ou não, se sim, então como, eu.e. vertical ou horizontalmente.

Este artigo forneceu uma visão geral completa da propriedade de repetição de fundo no CSS. Em primeiro lugar, determina quais são os valores que podem ser atribuídos à propriedade de repetição de fundo. Posteriormente, explicou o funcionamento de cada valor de repetição de fundo em detalhes, juntamente com os exemplos.