Para definir uma imagem por trás do elemento, o “imagem de fundo”A propriedade do CSS entra em jogo. Por padrão, ele aparece no canto superior esquerdo da tela e é repetido horizontal e verticalmente. Você também pode adicionar mais de uma imagem no fundo do elemento HTML; Além disso, defina a largura e a altura da imagem de acordo com suas preferências. No entanto, você também pode parar a repetição da imagem.

Este artigo fornecerá os seguintes resultados de aprendizado:

• • Propriedade de Background-Imagem
  • Como definir uma imagem de fundo

Propriedade CSS de “Antecedentes de Imagem”

O "imagem de fundo”A propriedade é usada para aplicar uma imagem no fundo de uma tag especificada.

Sintaxe

Aqui está a sintaxe para definir uma imagem de fundo para um elemento HTML:

Imagem de fundo: Image URL ();

Aqui, a imagem url () tem o nome da imagem ou o caminho da pasta de imagem no qual existe.

Vamos tentar um exemplo para ter uma melhor compreensão.

Exemplo: como definir uma imagem de fundo usando CSS?

Neste exemplo, primeiro, criaremos mais dois elementos (

e

tags), atrás da qual a imagem de fundo será adicionada. Você pode adicionar elementos de acordo com sua escolha e aplicar a propriedade de imagem de fundo:

Defina a imagem de fundo

Para definir a imagem de fundo, use a propriedade de imagem de fundo CSS

Você pode adicionar elementos de acordo com sua escolha e aplicar propriedade de imagem de fundo.

Mova para o CSS e atribua o nome da imagem em “imagem de fundo”URL:

corpo
Imagem de fundo: URL ("IMG.jpg ");

Depois de concluir todas as etapas, execute o arquivo HTML, você obterá o seguinte resultado:

Aqui você pode ver que a imagem de fundo está sendo repetida. Para evitar isso, use o “fundo de repetição”Propriedade e defina seu valor como“sem repetir”:

corpo
Imagem de fundo: URL ("IMG.jpg ");
Repetição de fundo: sem repetição;

Depois de tudo pronto, execute o código e consulte sua página da web:

Agora, você tem uma aparência limpa e elegante da imagem de fundo definida para a tag.

Boas práticas para definir imagens de fundo

• • Selecione uma imagem para combinar com a cor do seu texto.
  • Use combinações de cores atraentes.
  • Se a sua imagem de fundo e a cor do texto não se correspondem, sua página da web será mal projetada.

Conclusão

Para adicionar uma imagem de fundo no CSS, use o “imagem de fundoPropriedade e dê o URL da imagem na função url () do CSS. Você também pode impedir que sua imagem seja repetida usando o “fundo de repetição”Propriedade e definindo seu valor como“nenhum”. Este artigo explicou o procedimento para adicionar uma imagem ao plano de fundo usando o “imagem de fundo" e "fundo de repetição”Propriedades.