Documentação: Imagens de Fundo em CSS

Anotações referente a aula 19

Imagens de fundo são elementos fundamentais no design de websites modernos, permitindo criar layouts atrativos e imersivos. Quando aplicadas corretamente, podem transformar completamente a experiência visual do usuário, adicionando profundidade e contexto ao conteúdo.

Propriedades Essenciais para Imagens de Fundo

background-image

Define a imagem que será usada como fundo de um elemento.

Sintaxe básica:

background-image: url('caminho/para/imagem.jpg');

Exemplos:

/* Imagem única */
.elemento {
  background-image: url('imagem.jpg');
}

/* Múltiplas imagens (sobrepostas) */
.elemento-camadas {
  background-image: url('primeira.png'), url('segunda.png');
}

/* Gradientes como imagens */
.gradiente {
  background-image: linear-gradient(to right, #f6d365, #fda085);
}

Observações importantes:

• Use caminhos relativos ou URLs completas
• Pode combinar múltiplas imagens (a primeira declarada fica no topo)
• Suporta gradientes como imagens (linear, radial, conic)

background-size

Controla o dimensionamento da imagem de fundo dentro do elemento.

Valores comuns:

/* Tamanhos específicos (largura/altura) */
background-size: 200px 100px;

/* Cobrir todo o elemento, mantendo proporção */
background-size: cover;

/* Conter a imagem inteira, mantendo proporção */
background-size: contain;

/* Tamanho original da imagem */
background-size: auto;

Quando usar cada opção:

• cover: Quando precisa garantir que o elemento esteja totalmente coberto, mesmo que partes da imagem sejam cortadas
• contain: Quando precisa mostrar a imagem inteira, mesmo que sobrem espaços vazios
• Dimensões específicas: Quando precisa de controle exato sobre o tamanho

background-position

Define a posição inicial da imagem dentro do elemento.

Sintaxe:

/* Palavras-chave */
background-position: top right;

/* Porcentagens (x% y%) */
background-position: 25% 75%;

/* Unidades (x y) */
background-position: 10px 20px;

Posições comuns:

• top, right, bottom, left, center
• Combinações como top left, bottom right
• Valores percentuais (0% 0% = topo esquerdo, 100% 100% = inferior direito)

background-attachment

Determina se a imagem de fundo rola junto com o conteúdo ou permanece fixa.

Valores:

/* Rola com o conteúdo (padrão) */
background-attachment: scroll;

/* Permanece fixo em relação à viewport */
background-attachment: fixed;

/* Fixo em relação ao elemento (não à viewport) */
background-attachment: local;

Aplicações:

• fixed: Usado para criar efeito parallax
• local: Útil para conteúdo com rolagem interna
• scroll: Comportamento padrão e mais comum

background (Shorthand)

Permite definir todas as propriedades de fundo em uma única declaração.

Sintaxe completa:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];

Exemplo prático:

.header {
  background: #f5f5f5 url('header.jpg') no-repeat fixed center / cover;
}

Ordem recomendada:

1. Cor (background-color)
2. Imagem (background-image)
3. Repetição (background-repeat)
4. Fixação (background-attachment)
5. Posição (background-position)
6. Tamanho (background-size) - após barra (/)

Técnicas Avançadas

Efeito Parallax

O efeito parallax cria uma sensação de profundidade fazendo com que elementos de fundo movam-se em velocidades diferentes durante a rolagem.

Implementação básica:

.parallax {
  background-image: url('paisagem.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 500px; /* altura definida */
}

Dicas para o efeito parallax:

• Use imagens de alta qualidade para evitar pixelização
• Certifique-se de que o conteúdo ainda seja legível sobre a imagem
• Teste em dispositivos móveis (alguns têm problemas com fixed)
• Considere desativar para dispositivos móveis via media queries

Múltiplas Camadas de Fundo

Cria profundidade visual usando várias imagens sobrepostas.

.cena-profunda {
  background-image: 
    url('primeiro-plano.png'),
    url('meio.png'),
    url('fundo.png');
  background-position: 
    bottom center,
    center center,
    top center;
  background-size: 
    100% auto,
    cover,
    cover;
  background-repeat: no-repeat;
}

Sobreposição com Gradientes

Melhora a legibilidade de texto sobre imagens de fundo.

.texto-sobre-imagem {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)),
    url('imagem.jpg');
  background-size: cover;
  color: white;
}

Considerações para Performance

1. Otimize suas imagens:

   • Comprima imagens (jpg para fotos, png para transparência, webp para melhor compressão)
   • Escolha dimensões apropriadas (não muito maiores que o necessário)
   • Considere versões diferentes para dispositivos móveis (via media queries)

2. Técnicas de carregamento:

   • Pré-carregamento para imagens críticas: <link rel="preload" href="background.jpg" as="image">
   • Lazy loading para imagens abaixo da dobra
   • Considere usar placeholders de baixa resolução durante o carregamento

3. Acessibilidade:

   • Garanta contraste suficiente para leitura de texto
   • Não dependa apenas de imagens para transmitir informações importantes
   • Considere preferências de usuários para movimento reduzido

Compatibilidade entre Navegadores

A maioria das propriedades de background tem boa compatibilidade com navegadores modernos, mas considere:

• background-size pode precisar de prefixos para navegadores muito antigos
• Efeitos parallax podem ter comportamentos diferentes em dispositivos móveis
• Sempre teste em vários navegadores e dispositivos

Exemplos Práticos Completos

Hero Section com Imagem de Fundo

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

Cards com Imagens de Fundo

.card {
  width: 300px;
  height: 200px;
  background-image: url('card-bg.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.card-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 20px;
}

Seção com Efeito Parallax

.parallax-section {
  background-image: url('paisagem.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-content {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  border-radius: 8px;
  max-width: 600px;
}

Conclusão

O domínio das propriedades de imagem de fundo no CSS permite criar websites visualmente impactantes. Ao compreender como cada propriedade funciona e como combiná-las efetivamente, você pode criar experiências imersivas mantendo a performance e acessibilidade.

Lembre-se de sempre considerar:

• A relação entre conteúdo e fundo
• A legibilidade do texto
• O tempo de carregamento
• A experiência em diferentes dispositivos

Com prática e experimentação, você descobrirá combinações criativas para utilizar imagens de fundo em seus projetos web.