Propriedade CSS background-size
background-size é uma propriedade CSS que define o tamanho da imagem de fundo. Conheça os valores e experimente exemplos práticos.
A propriedade CSS background-size define o tamanho renderizado da imagem de fundo de um elemento. Por padrão, a imagem de fundo é exibida em seu tamanho natural (intrínseco); background-size permite dimensioná-la com medidas exatas, esticá-la por percentagens ou fazer com que preencha ou caiba automaticamente no elemento.
Esta página aborda todos os valores aceitos pela propriedade, a diferença entre as duas palavras-chave mais úteis (cover e contain), como ela se comporta com múltiplos fundos e exemplos executáveis para cada caso. É uma das propriedades CSS3.
Valores em resumo
A propriedade aceita os seguintes valores:
auto— o valor padrão. A imagem mantém seu tamanho e proporções intrínsecas.<length>— largura e altura explícitas, por exemplo300px 200px. Valores negativos são inválidos.<percentage>— tamanhos relativos à área de posicionamento do fundo do elemento, por exemplo40% 100%. Valores negativos são inválidos.cover— dimensiona a imagem (mantendo sua proporção) até que cubra completamente o elemento. O excesso é cortado.contain— dimensiona a imagem (mantendo sua proporção) até que caiba exatamente dentro do elemento. Podem restar espaços vazios.
Quando você fornece dois valores, o primeiro é a largura e o segundo é a altura. Se fornecer apenas um valor, ele define a largura e a altura assume auto por padrão, mantendo a proporção da imagem.
cover vs. contain — qual usar
Essas duas palavras-chave são as mais usadas e fáceis de confundir:
covergarante que não haja espaço vazio — a imagem sempre preenche a caixa. A desvantagem é que partes da imagem podem ser cortadas quando a proporção não corresponde ao elemento. Use-o para banners hero e fundos de seções em sangria completa onde não se deseja espaços vazios.containgarante que a imagem inteira seja visível — nada é cortado. A desvantagem é que podem aparecer faixas vazias nas laterais ou no topo/base. Use-o para logotipos, ícones ou qualquer imagem que precise ser exibida por completo.
Ambas mantêm a proporção original, portanto a imagem nunca é distorcida. Para esticar uma imagem a dimensões exatas (o que pode distorcê-la), use valores explícitos de <length> ou <percentage>.
Imagens com e sem tamanho intrínseco
Algumas imagens, como JPEG e PNG, possuem tamanhos e proporções intrínsecas. Outras, como gradientes CSS, não possuem. Uma imagem sem tamanho intrínseco ocupa todo o tamanho da área de fundo do elemento, a menos que você especifique o contrário, portanto background-size se comporta de forma ligeiramente diferente com gradientes do que com imagens raster.
Múltiplas imagens de fundo
background-size aceita valores separados por vírgula. Quando um elemento possui várias imagens de fundo, cada tamanho é associado a uma imagem de fundo na ordem — o primeiro valor se aplica ao primeiro background-image, o segundo ao segundo, e assim por diante:
background-image: url("logo.png"), url("texture.png");
background-size: 100px 100px, cover;| Valor inicial | auto |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Não. |
| Animável | Sim. O tamanho da imagem de fundo é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.backgroundSize = "50% 100%"; |
Sintaxe
Sintaxe da propriedade CSS background-size
background-size: auto | length | percentage | cover | contain | initial | inherit;A propriedade background-size é frequentemente usada com o atalho background, por exemplo:
background: url("image.jpg") no-repeat center / cover;Exemplo da propriedade background-size:
Exemplo da propriedade CSS background-size com valor em px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Resultado
No exemplo acima, o valor de comprimento é aplicado. Ele define a largura e a altura da imagem de fundo. O primeiro valor define a largura e o segundo define a altura. Se apenas um valor for fornecido, o segundo é definido como auto.
Veja outro exemplo onde a largura e a altura do background-image são definidas por percentagens.
Exemplo da propriedade background-size com o valor "%":
Exemplo da propriedade CSS background-size com valor em % (percentagem)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 40% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>O valor cover torna a imagem o maior possível sem esticá-la.
Exemplo da propriedade background-size com o valor "cover":
Exemplo da propriedade CSS background-size com valor cover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Exemplo da propriedade background-size com o valor "contain":
Exemplo da propriedade CSS background-size com o valor "contain":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Exemplo da propriedade background-size com o valor "auto":
Exemplo da propriedade CSS background-size com o valor "auto":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Exemplo da propriedade background-size com um único valor de comprimento:
Aqui um único valor (260px) é fornecido, portanto a largura é definida explicitamente e a altura recai para auto, preservando a proporção da imagem dentro de um <div> de tamanho fixo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
background-size: 260px;
}
</style>
</head>
<body>
<h1>CSS background-size property </h1>
<p>Example of the background-size property with a length value.</p>
<div></div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Este é o valor padrão. Define a imagem de fundo em seu tamanho original. | Experimente » |
| length | Define a largura e a altura da imagem de fundo. O primeiro valor define a largura e o segundo define a altura. Se apenas um valor for fornecido, o segundo é definido como auto. É especificado em "px", "em". | Experimente » |
| percentage | Define a largura e a altura por percentagens. O primeiro valor define a largura e o segundo define a altura. Se apenas um valor for fornecido, o segundo é definido como auto. | Experimente » |
| cover | Dimensiona a imagem de fundo o máximo possível para cobrir toda a área de fundo. | Experimente » |
| contain | Dimensiona a imagem de fundo para o maior tamanho em que sua largura e altura cabem dentro da área de fundo. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade de seu elemento pai. |
Dicas e propriedades relacionadas
background-sizeé frequentemente combinado combackground-positionebackground-repeatpara controlar exatamente como a imagem é posicionada e dimensionada.- No atalho
background, o tamanho vem depois da posição, separado por uma barra:background: url("image.jpg") no-repeat center / cover;. A posição é obrigatória quando você fornece um tamanho dessa forma. - Para dimensionar um elemento
<img>(em vez de um fundo CSS) controlando o recorte, useobject-fit, que oferece o mesmo comportamento decoverecontainpara elementos substituídos. coverecontainsimplificam fundos em tela cheia ou responsivos: combinarbackground-size: covercom umbackground-attachmentfixo produz um hero clássico em sangria completa que se adapta a qualquer viewport.