Propriedade background-image: Usando imagens de fundo

Aprenda a adicionar imagens como fundo de elementos.

Além de preencher o fundo de um elemento com uma cor sólida, o CSS nos permite usar imagens para criar fundos mais ricos e visuais. É para isso que serve a propriedade background-image.

A propriedade background-image define uma ou mais imagens de fundo para um elemento.

Pense na background-image como um papel de parede que você cola na parede do seu cômodo. Ele cobre a parede e pode ter padrões, fotos ou texturas.

Como usar a propriedade background-image

A sintaxe básica envolve a função url() para especificar o caminho da imagem.

Sintaxe:

seletor {
  background-image: url("caminho/para/sua/imagem.jpg");
}

O caminho/para/sua/imagem.jpg pode ser:

  • Caminho relativo: url("imagens/fundo.png") (se a imagem estiver na pasta imagens ao lado do seu CSS).
  • Caminho absoluto: url("/assets/fundo.jpg") (a partir da raiz do seu site).
  • URL externa: url("https://example.com/imagens/fundo.gif") (de um servidor externo).

Exemplos Práticos:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Background-Image</title>
  <style>
    /* Aqui vamos definir o CSS */
  </style>
</head>
<body>
  <header>
    <h1>Meu Site com Fundo Visual</h1>
  </header>
  <main>
    <section class="hero-section">
      <h2>Bem-vindo!</h2>
      <p>Explore nossos conteúdos incríveis.</p>
    </section>
    <section class="info-box">
      <p>Informações adicionais aqui.</p>
    </section>
  </main>
</body>
</html>

Agora, vamos aplicar imagens de fundo:

/* Define uma imagem de fundo para o cabeçalho */
header {
  background-image: url("https://via.placeholder.com/1200x300/333/fff?text=Header+Background"); /* Imagem de exemplo */
  height: 200px; /* É importante definir uma altura para ver a imagem */
  color: white;
  text-align: center;
  padding-top: 50px;
}

/* Define uma imagem de fundo para a seção hero */
.hero-section {
  background-image: url("https://via.placeholder.com/800x400/007bff/fff?text=Hero+Image"); /* Outra imagem de exemplo */
  height: 400px;
  color: white;
  text-align: center;
  padding-top: 150px;
  margin-top: 20px;
}

/* Define uma imagem de fundo para a caixa de informação */
.info-box {
  background-image: url("https://via.placeholder.com/400x200/28a745/fff?text=Info+Background"); /* Mais uma imagem de exemplo */
  height: 200px;
  padding: 20px;
  margin-top: 20px;
  color: white;
}

Resultado:

  • O <header> terá a imagem de fundo cinza escuro.
  • A .hero-section terá a imagem de fundo azul.
  • A .info-box terá a imagem de fundo verde.

Propriedades Relacionadas (Shorthand background)

A background-image raramente é usada sozinha. Ela geralmente é combinada com outras propriedades background-* para controlar como a imagem se comporta. Existe uma propriedade abreviada (background) que permite definir várias delas de uma vez.

As propriedades mais comuns para controlar a imagem de fundo são:

  • background-repeat: Controla se a imagem de fundo se repete.
    • no-repeat: A imagem aparece apenas uma vez.
    • repeat-x: A imagem se repete horizontalmente.
    • repeat-y: A imagem se repete verticalmente.
    • repeat (padrão): A imagem se repete em ambas as direções.
  • background-position: Define a posição inicial da imagem de fundo.
    • Valores: top, bottom, left, right, center (combinados, ex: center top), ou coordenadas (ex: 50% 50%, 10px 20px).
  • background-size: Define o tamanho da imagem de fundo.
    • auto (padrão): Tamanho original da imagem.
    • cover: Redimensiona a imagem para cobrir todo o elemento, cortando as bordas se necessário.
    • contain: Redimensiona a imagem para que ela caiba completamente dentro do elemento, sem cortar, mas pode deixar espaços vazios.
    • Valores em pixels ou porcentagem (ex: 100% auto, 200px 100px).
  • background-attachment: Define se a imagem de fundo rola com o conteúdo ou permanece fixa.
    • scroll (padrão): A imagem rola com o conteúdo.
    • fixed: A imagem permanece fixa na viewport (janela do navegador).
    • local: A imagem rola com o conteúdo do elemento, mesmo que o elemento tenha rolagem própria.

Exemplo com Propriedades Relacionadas:

.hero-section {
  background-image: url("https://via.placeholder.com/800x400/007bff/fff?text=Hero+Image");
  background-repeat: no-repeat; /* Não repete a imagem */
  background-position: center center; /* Centraliza a imagem */
  background-size: cover; /* Cobre todo o elemento */
  height: 400px;
  color: white;
  text-align: center;
  padding-top: 150px;
  margin-top: 20px;
}

Múltiplas Imagens de Fundo

Você pode definir várias imagens de fundo para um único elemento, separando-as por vírgulas. A primeira imagem na lista estará no topo (mais próxima do usuário), e as subsequentes estarão abaixo dela.

Exemplo:

body {
  background-image: url("overlay.png"), url("main-background.jpg");
  background-repeat: no-repeat, repeat; /* Repetição para cada imagem */
  background-position: top left, center center; /* Posição para cada imagem */
  background-size: auto, cover; /* Tamanho para cada imagem */
}

background-color e background-image Juntos

É uma boa prática sempre definir uma background-color junto com uma background-image. Se a imagem não carregar (por erro de caminho, internet lenta, etc.), a cor de fundo será exibida, evitando que o elemento fique sem fundo. A background-color também serve como um "plano de fundo" para a imagem, caso ela tenha transparência.

A propriedade background-image é uma ferramenta poderosa para criar designs visualmente ricos e atraentes, permitindo que você adicione texturas, padrões e fotos aos seus elementos HTML.