Propriedade background-size: Ajustando o tamanho da imagem de fundo

Você já sabe como colocar uma imagem de fundo (background-image) e como controlar sua repetição (background-repeat) e posição (background-position). Mas e se a imagem for muito grande ou muito pequena para o elemento? Ou se você quiser que ela preencha o espaço de uma forma específica?

É para isso que serve a propriedade background-size. Ela permite que você defina o tamanho da imagem de fundo.

Pense na background-size como a forma que você redimensiona uma foto para caber em um porta-retrato. Você pode esticá-la para preencher tudo, ou diminuí-la para que caiba inteira, ou até mesmo usar o tamanho original.

Como usar a propriedade background-size

A sintaxe permite vários tipos de valores para controlar o redimensionamento.

Sintaxe:

seletor {
  background-size: valor;
}

Valores possíveis:

1. auto (padrão): A imagem de fundo mantém seu tamanho original (largura e altura). Se apenas um valor for auto, o outro é calculado para manter a proporção da imagem.

   • Uso: Quando você quer que a imagem apareça em seu tamanho real.

2. cover: Redimensiona a imagem de fundo para que ela cubra completamente a área de conteúdo do elemento (incluindo padding e borda), mantendo sua proporção. Se a proporção da imagem for diferente da do elemento, partes da imagem podem ser cortadas.

   • Uso: Ideal para fundos de "capa" ou "hero" onde você quer que a imagem preencha todo o espaço, mesmo que isso signifique cortar um pouco.

3. contain: Redimensiona a imagem de fundo para que ela caiba completamente dentro da área de conteúdo do elemento, mantendo sua proporção. Se a proporção da imagem for diferente da do elemento, pode haver espaços vazios (preenchidos pela background-color) nas laterais ou em cima/embaixo.

   • Uso: Ideal para logotipos ou ícones que você quer que sejam totalmente visíveis, sem cortes.

4. Valores de Comprimento (px, em, rem, vw, vh, etc.): Você pode especificar a largura e a altura da imagem de fundo.

   • Sintaxe: background-size: largura altura;
   • Exemplo: background-size: 200px 150px; (largura de 200px, altura de 150px).
   • Se apenas um valor for fornecido, ele é a largura, e a altura é definida como auto para manter a proporção. Ex: background-size: 100px; é o mesmo que background-size: 100px auto;.
   • Uso: Para um controle preciso do tamanho da imagem.

5. Porcentagens: A largura e/ou altura da imagem de fundo são definidas como uma porcentagem da largura e/ou altura do elemento.

   • Sintaxe: background-size: largura% altura%;
   • Exemplo: background-size: 50% 50%; (a imagem terá metade da largura e metade da altura do elemento).
   • Se apenas um valor for fornecido, ele é a largura, e a altura é auto. Ex: background-size: 100%; é o mesmo que background-size: 100% auto;.
   • Uso: Para imagens responsivas que se ajustam ao tamanho do elemento.

Exemplos Práticos:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Background Size</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
    }
    .box {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      margin: 20px;
      display: inline-block;
      vertical-align: top;
      background-color: #f0f0f0; /* Cor de fallback */
      background-image: url("https://via.placeholder.com/600x300/007bff/fff?text=Image"); /* Imagem de exemplo (2:1 proporção) */
      background-repeat: no-repeat; /* Para facilitar a visualização */
    }
  </style>
</head>
<body>
  <div class="box box-auto">
    <h3>Auto (Padrão)</h3>
  </div>
  <div class="box box-cover">
    <h3>Cover</h3>
  </div>
  <div class="box box-contain">
    <h3>Contain</h3>
  </div>
  <div class="box box-pixels">
    <h3>200px 100px</h3>
  </div>
  <div class="box box-percentage">
    <h3>50% 50%</h3>
  </div>
  <div class="box box-percentage-auto">
    <h3>100% Auto</h3>
  </div>
</body>
</html>

Agora, vamos aplicar os estilos background-size:

.box-auto {
  background-size: auto; /* Tamanho original da imagem (600x300px) */
  background-position: center;
}

.box-cover {
  background-size: cover; /* A imagem (600x300) vai cobrir a caixa (300x200), cortando as laterais */
  background-position: center;
}

.box-contain {
  background-size: contain; /* A imagem (600x300) vai caber na caixa (300x200), deixando espaço em cima/embaixo */
  background-position: center;
}

.box-pixels {
  background-size: 200px 100px; /* Largura 200px, Altura 100px */
  background-position: center;
}

.box-percentage {
  background-size: 50% 50%; /* 150px de largura, 100px de altura (50% de 300x200) */
  background-position: center;
}

.box-percentage-auto {
  background-size: 100% auto; /* 300px de largura, altura proporcional (150px) */
  background-position: center;
}

Resultado: Cada caixa terá a imagem de fundo redimensionada de uma forma diferente, de acordo com o valor de background-size aplicado.

Propriedade Abreviada (background)

Lembre-se que você pode combinar background-image, background-repeat, background-position e background-size (e outras propriedades de fundo) na propriedade abreviada background.

Quando usar background-size na abreviação, ela vem depois de background-position, separada por uma barra (/).

Sintaxe na abreviação:

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

Exemplo:

.box-cover {
  background: url("https://via.placeholder.com/600x300/007bff/fff?text=Image") no-repeat center / cover #f0f0f0;
}

Dominar background-size é crucial para garantir que suas imagens de fundo se ajustem perfeitamente ao layout, sejam responsivas e transmitam a intenção visual desejada.