Curso de CSS / Cores e imagens de fundo: cover e contain

Os fundos em CSS podem preencher um elemento com cor ou imagem, mantendo o conteúdo HTML inalterado. background-size: cover preenche a área e pode cortar a imagem; contain mostra a imagem inteira e pode deixar espaço não utilizado.

Entenda cores e imagens de fundo

A cor de fundo é visível onde não há imagem e atrás das áreas transparentes. Quando uma cor de fundo foi definida, ela pode permanecer visível mesmo se a imagem não carregar; por padrão, o fundo é transparente. A própria imagem de fundo não é o conteúdo do elemento e não cria automaticamente a altura do elemento. Se você apenas colocar a URL da imagem em uma div vazia e não especificar uma altura, pode não haver nenhuma área para exibir. Ao exibir fotos significativas como conteúdo HTML, compare com o exemplo usando Imagens e Vídeo Responsivos: aspect-ratio e object-fit.

.sample {
  height: 300px;
  background-color: #e8e8e8;
  background-image: url("images/landscape.webp");
}

Se a própria imagem transmite informações, como uma foto ou diagrama explicativo no texto, é apropriado usar HTML img e texto alternativo. Você não pode anexar diretamente o atributo alt a um plano de fundo em CSS. Na caixa de exercício em branco nesta lição, você colocará um nome de acessibilidade que descreva os resultados da comparação, mas não precisa adicionar um role toda vez que usar o fundo decorativo em um serviço real. Não coloque descrições importantes apenas na imagem de fundo.

Prepare a imagem de amostra e a pasta

Abra a imagem de fundo para prática (600×400) e salve-a com o nome landscape.webp. Use as árvores à esquerda e à direita e o círculo central como objetos de comparação. Coloque a imagem na proporção 3:2 em uma caixa quadrada para que seja fácil ver onde as partes foram cortadas.

background-practice/
  backgrounds.html
  images/
    landscape.webp

Porque o exemplo incorpora seu CSS em backgrounds.html, images/landscape.webp é resolvido a partir desse documento HTML. Se você mover os estilos para css/style.css, use ../images/landscape.webp para a mesma imagem. URLs relativas em CSS externo são resolvidas a partir da folha de estilo. Verifique também maiúsculas e minúsculas do nome do arquivo e extensões. Para mais detalhes, veja MDN: background-image e caminhos de arquivos . Veja Aplicar CSS com Estilos Inline, Interno e Externo .

Compare cover e contain

Essas dimensões assumem uma área de fundo de 300 × 300, posicionamento centralizado, sem repetição e sem borda ou preenchimento. cover preenche a área cortando parte da imagem; contain preserva a imagem inteira e expõe a cor de fundo no espaço não utilizado. Quando a imagem e a área têm a mesma proporção, os dois resultados podem parecer idênticos. Veja MDN: tamanho do fundo.

A comparação esquemática usa um formato paisagem 3:2 para ilustrar os dois cálculos de dimensionamento. Com cover, os lados são cortados. Com contain, a imagem inteira permanece visível e o fundo cinza aparece acima e abaixo dela. O exemplo completo permite comparar esses efeitos com a imagem de prática fornecida.

Se você comparar cover·contain com apenas um gradiente CSS que não tem tamanho e proporção únicos, a diferença será quase invisível, pois preenche a mesma área. Para prática de corte, use um arquivo de imagem com tamanho e proporção fixos, como agora.

Controle repetição e posição

.repeat {
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: left top;
}

.no-repeat {
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: left top;
}

background-size: 100px auto define a largura para 100px e a altura para corresponder à proporção original. repeat preenche a área de fundo com uma pequena imagem repetidamente, no-repeat exibe-a apenas uma vez. Por causa da repetição básica, a imagem pode ser repetida mesmo no espaço vazio de contain, então especifique no-repeat ao comparar uma imagem inteira.

background-position define os critérios para posicionamento de imagens. center divide o espaço restante ou a parte cortada para ambos os lados, e left top alinha com base no canto superior esquerdo. Se você alterar a posição com cover, o tamanho não muda, mas o lado que é cortado muda. O exemplo usa propriedades separadas, então tenha cuidado para não inicializar outras configurações mais tarde adicionando a propriedade abreviada background.

Execute o exemplo completo de fundo

Salve o código abaixo como UTF-8 em backgrounds.html na pasta preparada anteriormente e abra-o. Use a mesma imagem nas quatro caixas para comparar tamanho e repetição. Se a janela estiver estreita, a largura da caixa será reduzida e a altura permanecerá em 300px, então o tamanho do corte e do espaço vazio também será recalculado.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing background image sizes</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }
    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;
      background-color: #e8e8e8; background-image: url("images/landscape.webp");
      background-position: center; background-repeat: no-repeat; }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }
    .no-repeat { background-size: 100px auto; background-position: left top; }
  </style>
</head>
<body>
  <h1>Comparing background images</h1>
  <h2>cover：Fill the box</h2><div class="sample cover" role="img" aria-label="Background with left and right sides cut out"></div>
  <h2>contain：Contains the entire picture</h2><div class="sample contain" role="img" aria-label="Background with empty space above and below"></div>
  <h2>repeat: small repetition</h2><div class="sample repeat" role="img" aria-label="Background with repeated small pictures"></div>
  <h2>no-repeat：Show small once</h2><div class="sample no-repeat" role="img" aria-label="Background with only one page displayed in the upper left corner"></div>
</body>
</html>

Altere uma propriedade de cada vez

1. Certifique-se, nas Ferramentas de Desenvolvedor, de que a janela está larga o suficiente para que as duas primeiras caixas tenham 300×300. Compare os cortes esquerdo e direito do cover e o espaço superior e inferior do contain.
2. Altere apenas o background-position do cover para left top. Depois de garantir que mais árvores à esquerda estão visíveis e mais à direita estão cortadas, retorne para center.
3. Altere o background-repeat do contain para repeat. Verifique se parte da imagem se repete no espaço vazio e retorne para no-repeat.
4. Altere o tamanho de .no-repeat de 100px auto para 100% 100%. Verifique se as proporções do círculo central mudam e retorne aos valores originais.

Diagnostique imagens ausentes e cortes inesperados

• Abra o link da imagem de prática diretamente para garantir que o arquivo original esteja visível. Verifique o nome do arquivo salvo e a extensão real e calcule o caminho de acordo com a localização do HTML/CSS.
• Inspecione a solicitação da imagem no painel Network das DevTools. Uma resposta 404 exige verificar o caminho. Se a resposta for bem-sucedida, mas a imagem estiver invisível, inspecione as dimensões da caixa e a declaração de background-image aplicada.
• Se você quiser que seja preenchido sem espaço vazio, verifique se é cover. Para mostrar a imagem inteira, especifique contain e no-repeat juntos. Se a imagem tiver a mesma proporção da caixa, a diferença entre os dois valores será pequena.
• Se você estiver adicionando um fundo atrás do seu texto, certifique-se de que o texto seja legível tanto em áreas claras quanto em áreas escuras. Como o objetivo desta lição é comparar imagens, o texto explicativo é colocado fora da caixa.

Antes de esticar à força a imagem de fundo, decida se é uma imagem que precisa ser vista por completo ou uma decoração que pode ser recortada. Imagens que exigem exibição completa, como fotos de produtos ou diagramas descritivos, e fundos decorativos não devem ser tratados com o mesmo padrão.