background-size

A propriedade background-size do CSS define o tamanho da imagem de fundo do elemento. A imagem pode ser deixada no seu tamanho natural, estendida ou comprimida para caber no espaço disponível.

Experimente

Espaços não cobertos por uma imagem de fundo são preenchidos com a propriedade background-color, e a cor do fundo ficará visível atrás das imagens de fundo que têm transparência/translucidez.

Sintaxe

/* Valores de palavras-chave */
background-size: cover;
background-size: contain;

/* Sintaxe de um valor */
/* largura da imagem (altura torna-se 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Sintaxe de dois valores */
/* Primeiro valor: largura da imagem, segundo valor: altura */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Vários planos de fundo */
background-size: auto, auto;/* Não confunda com `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Valores globais */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

A propriedade background-size é especificada de uma das seguintes maneiras:

  • Usando a palavra-chave contain ou cover.
  • Usando somente o valor da largura, caso em que o padrão de altura é auto.
  • Usando ambos os valores da largura e altura, nesse caso o primeiro define a largura e o segundo define a altura. Cada valor pode ser <length> (en-US), <percentage> (en-US) ou auto.

Para especificar o tamanho de várias imagens de fundo, separe o valor de cada uma com uma vírgula.

Valores

contain

Dimensiona a imagem o máximo possível dentro do seu contêiner sem cortar ou estender a imagem. Se o contêiner for maior do que a imagem, resultará em uma imagem lado a lado, a menos que a propriedade background-repeat (en-US) esteja definida como no-repeat.

cover

Dimensiona a imagem (enquanto preserva sua proporção) para o menor tamanho possível para caber no contêiner (ou seja: tanto a altura quanto o comprimento cobrem completamente o contêiner), sem deixar espaço vazio. Se as proporções do plano de fundo diferirem do elemento, a imagem será cortada verticalmente ou horizontalmente.

auto

Dimensiona a imagem de fundo na direção correspondente de forma que as proporções intrínsecas sejam mantidas.

<length> (en-US)

Estende a imagem na dimensão correspondente ao comprimento especificado. Valores negativos não são permitidos.

<percentage> (en-US)

Estende a imagem na dimensão correspondente à porcentagem especificada da área de posicionamento do plano de fundo. A área de posicionamento do plano de fundo é determinada pelo valor de background-origin (por padrão, o padding box). No entanto, se o valor background-attachment do plano de fundo for fixed, a área de posicionamento será o viewport inteiro. Valores negativos não são permitidos.

Dimensões e proporções intrínsecas

O cálculo dos valores depende das dimensões intrínsecas da imagem (largura e altura) e das proporções intrínsecas (relação largura/altura). Esses atributos são os seguintes:

  • Uma imagem bitmap (como a JPG) sempre possui dimensões e proporções intrínsecas.
  • Uma imagem vetorial (como a SVG) não tem necessariamente dimensões intrínsecas. Se tiver dimensões intrínsecas horizontais e verticais, também terá proporções intrínsecas. Se não tiver dimensões ou tiver apenas uma dimensão, pode ou não ter proporções.
  • O <gradient> (en-US) do CSS não têm dimensões intrínsecas ou proporções intrínsecas.
  • Imagens de plano de fundo criados com a função element() usam as dimensões e proporções intrínsecas do elemento gerador.

Nota: No Gecko, imagens de fundo criadas usando a função elemen() são atualmente tratadas como imagens com as dimensões do elemento, ou da área de posicionamento do fundo se o elemento é SVG, com a proporção intrínseca correspondente. Este é um comportamento fora do padrão.

Com base nas dimensões e proporções intrínsecas, o tamanho renderizado da imagem de fundo é calculado da seguinte forma:

  • Se ambos os componentes de background-size forem especificados e não forem auto: A imagem de fundo será renderizada no tamanho especificado.
  • Se o background-size for contain ou cover: Embora preservando suas proporções intrínsecas, a imagem é renderizada no maior tamanho contido ou cobrindo a área de posicionamento do plano de fundo. Se a imagem não possui proporções intrínsecas, então ela é renderizada no tamanho da área de posicionamento do plano de fundo.
  • Se o background-size for auto ou auto auto:
    • Se a imagem tiver dimensões intrínsecas horizontais e verticais, ela será renderizada nesse tamanho.
    • Se a imagem não tiver dimensões intrínsecas e proporções intrínsecas, ela será renderizada no tamanho da área de posicionamento do plano de fundo.
    • Se a imagem não tiver dimensões intrínsecas, mas tiver proporções intrínsecas, ela será renderizada como se contain tivesse sido especificado.
    • Se a imagem tiver apenas uma dimensão intrínseca e tiver proporções intrínsecas, ela será renderizada no tamanho correspondente a essa dimensão. A outra dimensão é calculada usando a dimensão especificada e as proporções intrínsecas.
    • Se a imagem tiver apenas uma dimensão intrínseca, mas não tiver proporções intrínsecas, ela será renderizada usando a dimensão especificada e a outra dimensão da área de posicionamento do plano de fundo.

    Nota: Imagens SVG têm um atributo preserveAspectRatio que é equivalente ao contain; um background-size explícito faz com que preserveAspectRatio seja ignorado.

  • Se o background-size tem um componente auto e um componente não auto:
    • Se a imagem tiver proporções intrínsecas, ela será ampliada para a dimensão especificada. A dimensão não especificada é calculada usando a dimensão especificada e as proporções intrínsecas.
    • Se a imagem não tiver proporções intrínsecas, ela será ampliada para a dimensão especificada. A dimensão não especificada é calculada usando a dimensão intrínseca correspondente da imagem, se houver. Se não houver essa dimensão intrínseca, ela se tornará a dimensão correspondente da área de posicionamento do plano de fundo

Nota: O dimensionamento do plano de fundo para imagens vetoriais que não possuem dimensões ou proporções intrínsecas ainda não foi totalmente implementado em todos os navegadores. Tenha cuidado ao confiar no comportamento descrito acima e teste em vários navegadores para garantir que os resultados sejam aceitáveis.

Definição formal

Initial valueauto auto
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Percentagesrelative to the background positioning area
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea repeatable list of

Sintaxe formal

background-size = 
  <bg-size>#  

<bg-size> = 
  [ <length-percentage [0,∞]> (en-US) | auto ]{1,2}  |
  cover                                      |
  contain                                    

<length-percentage> = 
  <length> (en-US)      |
  <percentage> (en-US)

Exemplos

Colocar lado a lado uma imagem grande

Vamos considerar uma imagem grande, uma imagem do logotipo do Firefox de 2982x2808. Queremos agrupar quatro cópias dessa imagem em um elemento de 300x300 pixels. Para fazer isso, podemos usar um valor fixo de background-size de 150 pixels.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Resultado

Veja Redimensionando as imagens de fundo para mais exemplos.

Especificações

Specification
CSS Backgrounds and Borders Module Level 3
# the-background-size

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também