Propriedade CSS background-size
Exemplo
Especifique o tamanho de uma imagem de fundo com "auto" e em pixels:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A background-sizepropriedade especifica o tamanho das imagens de fundo.
Existem quatro sintaxes diferentes que você pode usar com esta propriedade: a sintaxe da palavra-chave ("auto", "cover" e "contain"), a sintaxe de um valor (define a largura da imagem (a altura se torna "auto"), a sintaxe de dois valores (primeiro valor: largura da imagem, segundo valor: altura) e a sintaxe de fundo múltiplo (separada por vírgula).
| Valor padrão: | auto |
|---|---|
| Herdado: | não |
| Animavel: | sim. Leia sobre animáveis |
| Versão: | CSS3 |
| Sintaxe JavaScript: | objeto .style.backgroundSize="60px 120px" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -webkit-, -moz- ou -o- especificam a primeira versão que funcionou com um prefixo.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Sintaxe CSS
background-size: auto|length|cover|contain|initial|inherit;
Valores de propriedade
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Especifique o tamanho de uma imagem de fundo com porcentagem:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Exemplo
Especifique o tamanho de uma imagem de fundo com "capa":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Exemplo
Especifique o tamanho de uma imagem de fundo com "contain":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Exemplo
Aqui temos duas imagens de fundo. Especificamos o tamanho da primeira imagem de fundo com "contain" e a segunda imagem de fundo com "cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Exemplo
Use diferentes propriedades de plano de fundo para criar uma imagem "herói":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Páginas relacionadas
Tutorial CSS: Fundos CSS
Referência HTML DOM: propriedade backgroundSize