CSS 3: O Guia Completo - Estilo background-size

Uma pergunta recorrente que nossos alunos nos fazem em nossos cursos de Desenvolvimento Web é sobre a diferença entre os valores “cover” e “contain” no estilo background-size. Pensando nisso, neste artigo iremos falar sobre esse estilo CSS, entender qual é seu objetivo e as diferenças entre seus possíveis valores.

Função do estilo background-size

O objetivo do estilo background-size é definir qual será o tamanho da imagem de fundo de alguma tag, geralmente uma <div>. Para isso, ele recebe três possíveis valores: um número, a expressão “cover” ou a expressão “contain”. Nós iremos falar sobre cada um desses valores agora.

1 - Um número. Com esse valor podemos informar a largura e a altura da imagem de fundo. Esse valor por ser tanto em pixels como em porcentagem. Exemplo:

div {
	background: url('example.jpg') no-repeat;	
	background-size: 100px;	
}

Se informarmos apenas um número, como no caso acima, tanto a largura como a altura será de 100 pixels. Se desejarmos especificar também a altura, basta informar seu valor após o primeiro número, como podemos ver abaixo:

div {
	background: url('example.jpg') no-repeat;
	background-size: 100px 200px;
}

Vamos falar agora sobre os valores “cover” e “contain”. Os dois possuem o mesmo objetivo: fazer com que a imagem de fundo ocupe o máximo possível a área onde ela foi aplicada e também manter a proporção da imagem. Mas há uma pequena diferença entre esses dois valores.

2 - Expressão “cover”. Esse valor faz com que a imagem ocupe o espaço inteiro onde foi aplicada. Mas, para isso, ele realiza alguns cortes na imagem se ela tiver dimensões diferentes da área de sua ocupação.

3 - Expressão “contain”. Esse valor faz com que a imagem ocupe o máximo possível da área onde foi aplicada. Contudo, ele não realiza nenhum corte na imagem. Mesmo se ela tiver dimensões diferentes da área de sua ocupação, será garantido que ela estará “contida” na tag por completo. Se a imagem não puder conter 100% da área, a cor de fundo da tag será usada, se ela for definida.

O que acha de desenvolvermos um pequeno exemplo para vermos essa diferença na prática?

Exemplo

Vamos criar um arquivo HTML que irá conter uma <div>, onde adicionaremos um background. Ela possuirá o ID “background-example”. Esse arquivo HTML também fará referência para um arquivo chamado style.css, onde iremos aplicar nossos estilos CSS.

Vamos testar primeiro o background-size informando um valor em números. O conteúdo do arquivo CSS será o seguinte:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: 200px;
}

Explicando: a nossa <div> possuirá uma largura de 600 pixels e uma altura de 500 pixels. Nós também definimos uma cor de fundo cinza para enxergar o real tamanho da <div>. Por fim, nossa imagem de fundo terá 200 pixels tanto de largura quanto de altura. Ou seja, terá dimensões menores do que a <div> onde foi aplicada. O resultado no navegador será o seguinte:

A imagem foi adicionada como background sem problemas. Contudo, sobrou muito espaço vazio em nossa <div>, visto que a imagem tinha dimensões menores do que ela.

Vamos aplicar o valor “contain” agora. O conteúdo CSS ficará assim:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: contain;
}

O resultado em nosso navegador será este:

Agora nossa imagem ficou maior e ocupou uma grande parte da <div>. Contudo, esse foi o máximo de ocupação possível sem que precisasse realizar cortes na imagem. Assim, foi necessário usar a cor de fundo para terminar de ocupar a área total da <div>.

Por fim, vamos usar o valor “cover”. Nosso CSS ficará dessa maneira:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: cover;
}

Este será o resultado no navegador:

Agora sim nossa imagem ocupou a área inteira da <div>. Entretanto, para que isso fosse possível sem perder a sua proporção, para que ela não ficasse esticada, foi necessário realizar cortes nela.

Talvez pensemos: “Mas agora não dá pra ver a imagem direito. Afinal, cortou grande parte dela”. Algo que podemos fazer para solucionar esse problema é usar o estilo background-position. Vamos adicioná-lo ao nosso seletor CSS informando como seu valor a expressão “center”:

background-position: center;

O resultado no navegador agora será este:

A imagem ficou bem melhor agora, pois está posicionada em seu centro. O estilo background-position é bem interessante. Acho que podemos falar mais sobre ele, mas isso fica para um próximo artigo.

Neste artigo vimos por meio de exemplos práticos as diferenças entre os possíveis valores para o estilo background-size. Com esse conhecimento estamos agora preparados para decidir quando usar esse estilo e qual de seus valores escolher.

Se você gostou desse conteúdo, não esqueça de compartilhar com outras pessoas, isso nos ajuda muito a continuar produzindo matérias legais para vocês. A gente se vê no próximo artigo! :)