Ao criar um site ou escrever uma postagem no blog, as imagens desempenham um papel vital em tornar as coisas mais atraentes e compreensíveis. Sem imagens, seja um blog ou um site, ele se torna monótono e os leitores começam a perder o interesse. As imagens de fundo também têm um impacto pragmático na interatividade da página da web.

Este artigo fornece um guia detalhado para adicionar uma imagem de fundo em html. Além disso, este artigo serve os seguintes resultados sobre:

• Como adicionar uma imagem de fundo em html
• Como adicionar uma imagem de fundo a uma tag em html
• Como adicionar uma imagem de fundo da página da web em html
• Como evitar a repetição da imagem de fundo
• Como cobrir todo o fundo sem repetição
• Como esticar a imagem de fundo em html

Como adicionar uma imagem de fundo em html

No HTML, podemos adicionar uma imagem de fundo usando a imóvel CSS. Uma imagem de fundo é usada como papel de parede em um site ou como uma imagem de capa para um controle deslizante. A sintaxe da propriedade “Background-Image” está escrita abaixo:

Imagem de fundo: URL ('Nome da imagem');

A sintaxe acima é uma propriedade CSS e pode ser usada em uma folha de estilo externa, CSS interna ou CSS embutido.

Exemplo

Para uma melhor compreensão, o seguinte código HTML é praticado para adicionar uma imagem de fundo em HTML.

Esta é uma imagem

Neste exemplo, usamos a propriedade de imagem de fundo no

tag para adicionar uma imagem de fundo.

Saída

A saída mostra que em HTML uma imagem de fundo pode ser adicionada usando a propriedade CSS.

Como adicionar uma imagem de fundo a uma tag em html

Também podemos adicionar imagem de fundo em um parágrafo usando CSS interno, embutido ou externo. Podemos usar a imagem de fundo em um parágrafo para criar designs diferentes.

Exemplo

Fundo do parágrafo

Este parágrafo está escrito para demonstrar o uso da imagem de fundo com parágrafo.
Este parágrafo está escrito para demonstrar o uso da imagem de fundo com parágrafo. Este parágrafo está escrito para demonstrar o uso da imagem de fundo com parágrafo.
Este parágrafo está escrito para demonstrar o uso da imagem de fundo com parágrafo. Este parágrafo está escrito para demonstrar o uso da imagem de fundo com parágrafo.

Neste exemplo, usamos uma imagem de fundo para alterar o fundo do parágrafo.

Saída

A saída mostra que adicionamos uma imagem de fundo a um parágrafo usando a propriedade de imagem de fundo.

Como adicionar uma imagem de fundo da página da web em html

Normalmente, o plano de fundo de uma página da web é branco, mas também podemos alterar o plano de fundo de uma página da web usando a propriedade de imagem de fundo para a tag html. imagem de fundo.

Exemplo

Fundo corporal

Ao criar um site ou escrever uma postagem no blog, as imagens desempenham um papel vital em tornar as coisas mais atraentes e compreensíveis. Sem imagens, seja um blog ou um site, ele se torna monótono e os leitores começam a perder o interesse.

Neste exemplo, alteramos o plano de fundo de uma página da web adicionando uma imagem de fundo ao htmlbody.

Saída

Esta saída mostra que a propriedade de imagem de fundo definiu a imagem para toda a página.

Como evitar a repetição da imagem de fundo

Quando adicionamos plano de fundo em uma página da web, a imagem se repita para cobrir a página inteira como mostrar abaixo:

Portanto, para evitar a repetição da imagem, usamos a propriedade CSS fundo de repetição e definir seu valor para sem repetir Conforme mostrado na seguinte saída:

Exemplo

Neste exemplo, removemos a repetição da imagem com a ajuda da propriedade CSS de repetição de fundo.

Saída

A saída mostra que depois de usar Repetição de fundo: sem repetição; As imagens de propriedade vêm para o tamanho original e deixam o restante da página vazio.

Como cobrir todo o fundo sem repetição

O tamanho de fundo e Antecipação de fundo Propriedades podem ser usadas para definir uma imagem para todo o fundo. Para fazer isso, você precisa usar o cobrir e fixo valores de tamanho de fundo e Antecipação de fundo propriedades.

Exemplo

Neste exemplo, usamos o Antecedentes-tamanho: capa Para adicionar uma imagem de fundo a toda a página da web sem repetição. E a Antecipação de fundo: corrigido A propriedade remove o efeito de rolagem.

Saída

A saída acima mostra que a propriedade de tamanho de fundo cobre toda a página da web, mas permanece rolável, para remover o efeito de rolagem, usamos a propriedade de atendimento de fundo.

Como esticar a imagem de fundo em html

Você pode esticar a imagem de fundo para evitar a repetição de uma imagem. Para fazer isso, o tamanho de fundo e Antecipação de fundo Propriedades do CSS.

Exemplo

Neste exemplo, usamos o Size de fundo: 100% 100%. O primeiro 100 se refere à largura e o segundo 100 identifica a altura que eventualmente estica a imagem. Enquanto Antecipação de fundo: corrigido

Saída

A saída acima mostra a propriedade de tamanho de fundo para esticar a imagem, mas permanece rolável, para remover o efeito de rolagem, usamos a propriedade de atendimento de fundo.

Conclusão

Em html, imagem de fundo A propriedade é usada para adicionar uma imagem de fundo . Este artigo tem como objetivo adicionar uma imagem de fundo em HTML. A imagem de fundo pode ser adicionada a um único elemento HTML ou a toda a página da web. Além disso, a imagem de fundo pode ser personalizada usando várias propriedades CSS, como tamanho de fundo, atendimento de fundo ou propriedades de repetição de fundo. Também fornecemos uma visão do uso dessas propriedades para manipular a imagem de fundo. imagem de fundo.