background-size
A propriedade background-size
do CSS especifica o tamanho das imagens de fundo. O tamanho da imagem pode ser totalmente ou apenas parcialmente comprimido com o objetivo de preservar sua proporção.
/* Sintaxe */
background-size: cover;
background-size: contain;
/* Sintaxe de um valor */
/* largura da imagem (height é setado como 'auto') */
background-size: 50%;
background-size: 3em;
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;
/* Múltiplos valores de backgrounds para a imagem de fundo */
/* Não confunda com background-size: auto auto */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Valores globais */
background-size: inherit;
background-size: initial;
background-size: unset;
Initial value | auto auto |
---|---|
Aplica-se a | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | não |
Percentages | relative to the background positioning area |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | repeatable list of simple list of length, percentage, or calc |
Sintaxe
O tamanho de uma única imagem de fundo pode ser especificado de três maneiras diferentes:
Para especificar usando width e height, você pode fornecer um ou dois valores:
- se apenas um valor for fornecido, ele valerá para a width e height será
auto
. - Se dois valores forem fornecidos, o primeiro corresponde a width e o segundo a height.
Cada valor pode ser um <length>
, uma <percentage>
, ou auto
.
Por exemplo:
background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: auto 1em;
background-size: 50% 25%;
Para especificar o tamanho de fundo para mais de uma imagem, forneça múltiplos tamanhos separados por vírgula:
background-size: 50% 25%, contain, 3em;
Valores
<length>
-
Um valor
que ajusta a imagem de fundo para o comprimento especificado na dimensão correspondente. Comprimentos negativos não são permitidos.<length>
(en-US) <percentage>
-
Um valor
<percentage>
(en-US) que ajusta a imagem de fundo na dimensão correspondente com a porcentagem especificada para a área do elemento pai, que é determinado pelo valorbackground-origin
. A área correspondente ao elemento pai é, por padrão, a área que engloba o conteúdo da caixa e seu respectivo padding; a área pode também ser alterada para englobar apenas o conteúdo ou para a área contendo as bordas, o padding e o conteúdo. Se oattachment
estáfixed
, a área do elemento pai é a área inteira do janela do navegador, não incluindo a área coberta pelas barras de rolagem (se estiverem presentes). Valores negativos de porcentagem não são permitidos. auto
-
Uma palavra-chave que ajusta a imagem de fundo para tal direção de modo que mantenha a proporção da imagem inalterada.
contain
-
Uma palavra-chave que aumenta o máximo possível a imagem mantendo a sua proporção (a imagem não fica esticada). A imagem tenta ocupar o espaço inteiro do container. Quando a imagem e o container tem diferentes dimensões, as áreas não preenchidas (tanto top/bottom ou left/right) são preenchidas com a cor de fundo.
cover
-
Uma palavra-chave que é o inverso de
contain
. Ajusta a imagem o mais largamente possível e mantém sua proporção (a imagem não fica esticada). A imagem "cobre" o container inteiro, tanto em altura como em largura. Quando a imagem e o container têm diferentes dimensões,a imagem ultrapassa os limites do container em qualquer direção, para continuar mantendo a proporção.
A interpretação dos possíveis valores depende das dimensões intrínsecas da imagem (largura e altura) e da proporção intrínseca (proporção da largura e altura). Um imagem bitmap sempre tem dimensões intrínsecas e uma proporção intrínseca. Uma imagem pode conter ambas as dimensões intrínsecas (e portanto deve ter uma proporção intrínseca). Poderá contar também uma ou nenhuma dimensão intrínseca, e portanto pode ou não pode conter uma proporção intrínseca. Gradients são tratados como imagens sem dimensões ou proporções intrínsecas.
Note: Nota: Esse comportamento mudou no Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). Antes disso, gradients eram tratados como imagens sem dimensões intrínsecas, porém com uma proporção intrínseca idêntica a da área do elemento pai.
Imagens geradas por elementos usando -moz-element
(en-US) (que na realidade casa com um elemento) são atualmente tratadas como imagens com as dimensões do elemento, ou da área de posicionamento de fundo se o elemento é SVG, com a proporção intrínseca correspondente.
Note: Nota: Este não é o comportamento atualmente especificado, que é que as dimensões intrínsecas e a proporção devem ser as do elemento em todos os casos.
O tamanho renderizado da imagem de fundo é então computado da seguinte forma:
- Se ambos os componentes do
background-size
são especificados e não háauto
-
A imagem de fundo é renderizada no tamanho especificado.
- Se o
background-size
écontain
oucover
: -
A imagem é renderizada, preservando sua proporção intrínseca, com o maior tamanho contido, ou cobrindo a área do elemento pai. Se a imagem não tiver uma proporção intrínseca, então ela é renderizada no tamanho da área do elemento pai.
- Se o
background-size
éauto
ouauto auto
: -
Se a imagem tiver duas dimensões intrínsecas, ela é renderizada nesse tamanho. Se não tiver dimensões intrínsecas e nenhuma proporção intrínseca, ela é renderizada ao tamanho da área do elemento pai. Se não tiver dimensões, mas tiver uma proporção, é processado como se
contain
tivesse sido especificado. Se a imagem tiver uma dimensão intrínseca e uma proporção, ela é renderizada no tamanho determinado por essa dimensão e a proporção. Se a imagem tiver uma dimensão intrínseca mas nenhuma proporção, ela é processada usando a dimensão intrínseca e a dimensão correspondente da área do elemento pai.Note: Nota: imagens SVG tem um atributo preserveAspectRatio que é equivalente ao 'contain'. No Firefox 43, ao contrário do Chrome 52, um background-size especificado explicitamente faz com que preserveAspectRatio seja ignorado.
- Se o background-size tem um componente
auto
e um componente nãoauto
: -
Se a imagem tiver uma proporção intrínseca, então use a dimensão especificada. Se a imagem não tiver uma proporção intrínseca, use a dimensão especificada para essa dimensão. Para a outra dimensão, use a dimensão intrínseca correspondente da imagem se houver uma. Se não existe essa dimensão intrínseca, use a dimensão correspondente da área do elemento pai.
Observe que o dimensionamento de fundo para vectors que não possuem dimensões ou proporções intrínsecas ainda não está totalmente implementado em todos os navegadores. Tenha cuidado ao confiar no comportamento descrito acima e teste em vários navegadores (especificamente incluindo versões do Firefox 7 ou anteriores e Firefox 8 ou superior) para ter certeza de que diferentes renderizações são aceitáveis.
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
Essa demonstração do background-size: cover
e essa demonstração do background-size: contain
foram feitas para você abrir em uma nova aba para ver como contain
e cover
se comportam quando as dimensões da área do elemento pai varia. Essa séria de demonstrações de como background-size
funciona e interage com outras propriedades background-*
devem ser suficientes para entender como usar background-size
sozinho e em conjunto com outras propriedades.
Notas
Se você estiver especificando um gradient como plano de fundo e tiver especificado um background-size
junto, é melhor não especificar um tamanho que use um único componente setado como auto ou seja especificado usando apenas um valor de largura (por exemplo, background-size: 50%
). A renderização de gradients em tais casos mudou no Firefox 8 e, no momento, geralmente é inconsistente em todos os navegadores, pois nem todos implementam a renderização em total conformidade com a especificação background-size
do CSS3 e com a especificação do CSS3 para valores de gradient.
.bar {
width: 50px; height: 100px;
background-image: gradient(...);
/* NÃO RECOMENDADO */
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
/* OKAY */
background-size: 25px 50px;
background-size: 50% 50%;
}
Observe que, em particular, não é recomendável usar uma dimensão de pixel e uma dimensões auto
com um gradient, porque é impossível replicar a renderização nas versões do Firefox antes de 8 e nos navegadores que não implementam a renderização do Firefox 8, sem saber o tamanho exato do elemento cujo plano de fundo está sendo especificado.
Especificações
Especificação | Status | Comentário |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'background-size' in that specification. |
Candidata a Recomendação | Initial definition |
Compatibilidade com navegadores
BCD tables only load in the browser
Soluções alternativas
Para Internet Explorer anterior ao IE8
Como o Internet Explorer 8 não suporta a propriedade background-size
, é possível emular algumas de suas funcionalidades usando a propriedade não padrão -ms-filter
:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Isso simula o valor cover
.
No Firefox 3.5
Enquanto essa propriedade foi adicionada no Firefox 3.6, é possível esticar totalmente a imagem no Firefox 3.5 usando -moz-border-image
(en-US).
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}