11.01.2025

Como Esticar Imagem de Fundo em CSS para a Altura Total

Resposta Rápida

Para preencher uniformemente todo o espaço disponível da tela com uma imagem de fundo, use o seguinte código CSS:

body {
  /* Substitua 'sua-imagem.jpg' pelo caminho para sua imagem */
  background: url('sua-imagem.jpg') no-repeat center center/cover;
}

O valor center center/cover garante que as proporções da imagem sejam mantidas enquanto ela é esticada para preencher toda a tela. A propriedade no-repeat impede que a imagem se repita no fundo.

Construindo a Base

Regras Básicas de CSS

Para garantir que a imagem de fundo seja exibida corretamente em diferentes dispositivos e navegadores, definimos as seguintes regras CSS:

html, body {
  /* Remove margens e espaços vazios */
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Previne repetição da imagem */
  background: url('sua-imagem.jpg') no-repeat center center fixed;

  /* Garante compatibilidade com versões mais antigas dos navegadores */
  -webkit-background-size: cover; /* Para Safari 3-4 */
  -moz-background-size: cover;    /* Para versões antigas do Firefox */
  -o-background-size: cover;      /* Para versões antigas do Opera */

  /* Propriedade padrão */
  background-size: cover;         
}

A Propriedade background-size

A palavra-chave cover no valor background-size: cover; escala a imagem de modo que ela se estique e cubra totalmente a área, sem distorcer as proporções da imagem.

Evitando Repetição

A propriedade background-repeat: no-repeat; é essencial para evitar a repetição da imagem, o que poderia levar a efeitos indesejados no fundo.

Fixando o Fundo

A propriedade background-attachment: fixed; garante que a imagem de fundo permaneça estática enquanto a página é rolada, mantendo o efeito imersivo em tela cheia.

Unidades Relativas para o Tamanho da Tela

Você pode usar unidades projetadas especificamente para tamanhos de tela—vh e vw:

body {
  /* Faz com que a imagem role com a página */
  background: url('sua-imagem.jpg') no-repeat center center scroll;
  /* Define o tamanho de fundo como uma porcentagem da largura e altura da tela */
  background-size: 100vw 100vh;
}

100vw e 100vh indicam que a imagem deve se esticar por toda a tela em largura e altura, respectivamente.

Aplicações Práticas e Diversos Cenários

Mantendo Proporções

Fique atento à relação de aspecto do seu fundo para evitar cortar elementos-chave da imagem ao usar background-size: cover;. Escolha imagens pensando em diferentes tamanhos de tela.

Desempenho

Imagens de fundo grandes podem aumentar o tempo de carregamento da página. Busque gráficos otimizados e use consultas de mídia para selecionar imagens adequadas para telas menores.

Posicionamento do Fundo

Em alguns casos, posicionar o fundo na parte superior funciona melhor, especialmente se elementos importantes estiverem na parte superior da imagem:

body {
  /* Define a posição do fundo para o centro no topo */
  background-position: center top;
}

Testando em Diferentes Navegadores

Não se esqueça de verificar como a imagem de fundo é exibida em vários dispositivos e navegadores para garantir uma representação visual consistente da sua página.

Visualização

Tente visualizar sua tela como uma tela em branco (🖼️) e a imagem de fundo como tinta (🎨):

Sem CSS:

🖼️ + 🎨 = [A imagem aparece no tamanho original sem esticar]

Com CSS:

🖼️ + 🎨 ➡️🔧🖥️ = [Imagem esticada para cobrir completamente toda a tela]

Código CSS Principal para Esticar o Fundo:

body, html {
  height: 100%;
  margin: 0;
}

.fullscreen-bg {
  /* Centraliza o fundo */
  background: url('sua-imagem.jpg') no-repeat center center; 
  background-size: cover; /* A imagem cobre toda a tela */
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1; /* O fundo não interfere com os outros conteúdos */
}

Ao usar background-size: cover;, você instrui a imagem a preencher toda a tela sem deixar espaços, como se um pincel estivesse criando uma tela (🖌️✨).

Recursos Úteis

1. A Imagem de Fundo Perfeita para Tela Cheia | CSS-Tricks — Opções avançadas de personalização de fundo em CSS.
2. background-size - CSS: Folhas de Estilo em Cascata | MDN — Documentação detalhada sobre a propriedade background-size em CSS.
3. Como Fazer uma Imagem em Tela Cheia — Um guia abrangente para criar imagens de fundo em tela cheia.
4. AspectJ não funciona como esperado no Eclipse - Stack Overflow — Pode ser útil se contiver informações sobre CSS e dimensionamento de imagens.
5. Tamanho do Fundo, Por Favor! – A List Apart — Discussão sobre imagens em tela cheia como fundos.
6. Blog de Design Web | WDD — Sobre como criar imagens de fundo escaláveis em design web.

Video

Navigation