🌄 Background Image

Introdução

Além de inserir imagens utilizando a tag <img>, também podemos utilizar imagens como plano de fundo dos elementos HTML.

Essa técnica é muito utilizada em banners, cabeçalhos, páginas institucionais, landing pages e sistemas Web modernos.

📌 O CSS utiliza a propriedade background-image para definir imagens de fundo.

O que é Background Image?

A propriedade background-image permite adicionar uma imagem como plano de fundo de qualquer elemento HTML. 

background-image: url("imagem.jpg");

A imagem será exibida atrás do conteúdo do elemento.

Exemplo Básico

.banner {
  background-image: url("banner.jpg");
}
Nesse exemplo a imagem banner.jpg será utilizada como fundo da classe banner.

Aplicando em uma DIV

<div class="banner">
  Conteúdo
</div>
.banner{
  height:300px;
  background-image:url("banner.jpg");
}

A imagem ocupará a área definida pela altura da DIV.

Estrutura de Arquivos

projeto/
│
├─ index.html
├─ style.css
│
└─ imagens/
   └─ banner.jpg
background-image:
url("imagens/banner.jpg");

Utilizando Imagem Externa

Também é possível utilizar imagens hospedadas em outros servidores. 

background-image:
url("https://site.com/banner.jpg");
⚠️ Caso a imagem seja removida do servidor externo ela deixará de ser exibida.

Background x Tag IMG

Background Image Tag IMG
Imagem decorativa Imagem de conteúdo
Aplicada via CSS Aplicada via HTML
Fica atrás do conteúdo Faz parte do conteúdo

Exemplo de Banner

.banner{
  height:400px;
  background-image:url("banner.jpg");
}

Muito utilizado em páginas iniciais para destacar produtos, serviços ou informações importantes.

Boas Práticas

Erros Comuns

Erro Consequência
Caminho incorreto Imagem não aparece.
Imagem muito pesada Site lento.
Baixa resolução Imagem borrada.

Resumo

Propriedade Função
background-image Define uma imagem de fundo.
url() Informa o caminho da imagem.
📌 O background-image é a base para criação de banners, cabeçalhos e diversos efeitos visuais em páginas Web.
🎓 Aula concluída! Agora você sabe utilizar a propriedade background-image para adicionar imagens de fundo em elementos HTML.