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

seletor {
	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:

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

#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):

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

#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):

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

#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:

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

#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:

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

#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:

<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>

.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:

<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>

.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):

<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>

.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