Propriedade background-size

A propriedade background-size define o tamanho da imagem de fundo. Os valores da propriedade são quaisquer unidades de tamanho, ou as palavras-chave auto, cover ou contain.

Sintaxe

cssseletor {
  background-size: valor;
}

Palavras-chave

Valor	Descrição
`auto`	O fundo terá seu tamanho natural, como o tamanho real da imagem de fundo. Se `auto` for especificado apenas para um lado, nesse lado o fundo será dimensionado para manter as proporções originais.
`cover`	Dimensiona a imagem para cobrir todo o elemento preservando suas proporções. A imagem tentará se encaixar completamente, mas nem sempre será possível, portanto, alguma parte dela poderá ser cortada. O elemento sempre será completamente coberto pela imagem.
`contain`	Dimensiona a imagem para que ela caiba inteiramente dentro do elemento, preservando suas proporções. Ela pode ocupar toda a largura ou toda a altura (dependendo das proporções da imagem e das dimensões do elemento). De modo geral, o elemento não será completamente coberto pela imagem (mas a imagem sempre será exibida por completo, mesmo que em uma versão reduzida).

Valor padrão: auto.

Uso

Unidades de tamanho e auto podem ser usados em várias combinações, por exemplo: auto 20px, ou 30% 20px, ou auto 30%, e assim por diante. Nesse caso, o primeiro parâmetro define o tamanho do fundo na largura, e o segundo parâmetro - o tamanho do fundo na altura. Se um parâmetro for especificado - ele definirá o tamanho do fundo tanto na largura quanto na altura simultaneamente.

Exemplo

Agora a imagem de fundo terá seu tamanho natural:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 550px;
  height: 400px;
}

Результат:

Exemplo

Agora a imagem de fundo terá o tamanho de 300px por 400px (no nosso caso, as proporções da imagem serão distorcidas):

html<div id="elem"></div>

css#elem {
  background-size: 300px 400px;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

Exemplo

Agora a imagem de fundo terá o tamanho de 400px por 400px (no nosso caso, as proporções da imagem serão distorcidas):

html<div id="elem"></div>

css#elem {
  background-size: 400px;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

Exemplo

Agora a imagem de fundo terá 400px na horizontal, e na vertical seu tamanho se ajustará para que as proporções não sejam distorcidas:

html<div id="elem"></div>

css#elem {
  background-size: 400px auto;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

Exemplo

Agora a imagem de fundo terá 400px na vertical, e na horizontal seu tamanho se ajustará para que as proporções não sejam distorcidas:

html<div id="elem"></div>

css#elem {
  background-size: auto 400px;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

Exemplo . Valor contain

Observe o funcionamento do valor contain:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

Exemplo . Valor cover

Observe o funcionamento do valor cover:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

Exemplo . Melhorando o funcionamento do cover

O funcionamento do valor cover pode ser melhorado centralizando a imagem com a propriedade background-position (no nosso caso, as partes visíveis começarão a ser as cabeças dos cavalos, e não seus traseiros):

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo