Alterando a escala das imagens de background

A propriedade CSS background-size possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.

Duplicando uma imagem grande

Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:

Isto pode ser conseguido usando o seguinte CSS:

.square {
  width: 300px;
  height: 300px;
  background-image: url(firefox_logo.png);
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
  background-size: 150px;
}

O background-size não precisa mais de nenhum prefixo, mas você pode considerar a adição de uma versão pré-fixada se você está focando em browsers muito antigos.

Esticando uma imagem

Você também pode especificar ambos os tamanhos, horizontal e vertical da imagem, assim:

background-size: 300px 150px;

O resultado fica assim:

Aumentando escala de uma imagem

Na outra extremidade do espectro, é possível dimensionar-se uma imagem no fundo. Aqui nós aumentamos a escala de um favicon de pixel 32x32 para 300x300 pixels:

.square2 {
  width: 300px;
  height: 300px;
  background-image: url(favicon.png);
  background-size: 300px;
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

Como você pode ver, o CSS é, na verdade, essencialmente idêntico, salvo o nome do arquivo de imagem.

Valores especiais: "contain" e "cover"

Da mesma maneira que o <length>, a propriedade CSS de background-size oferece dois valores de tamanho especial, contain e cover. Vamos dar uma olhada nestes.

`contain`

O valor contain especifica que, independentemente do tamanho da caixa que contém, a imagem de fundo deve ser dimensionado de modo a que cada lado seja tão grande quanto possível ao mesmo tempo que não exceda o comprimento do lado correspondente do recipiente. Tente redimensionar a janela usando um navegador que suporta imagens de fundo de escala (como o Firefox 3.6 ou posterior) para ver isso em ação no exemplo vivo abaixo.

<div class="bgSizeContain">
  <p>Tente redimensionar a janela e ver o que acontece.</p>
</div>

.bgSizeContain {
  height: 200px;
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
  background-size: contain;
  border: 2px solid darkgray;
  color: #000; text-shadow: 1px 1px 0 #fff;
}

`cover`

O valor cover especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.

Os exemplos à seguir usam HTML & CSS:

<div class="bgSizeCover">
  <p>Tente redimensionar a janela e ver o que acontece.</p>
</div>

.bgSizeCover {
  height: 200px;
  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
  background-size: cover;
  border: 2px solid darkgray;
  color: #000; text-shadow: 1px 1px 0 #fff;