Backgrounds – Parte 3: background-size

background-size

Antes do CSS3, o tamanho de fundo era determinada pelo tamanho real da imagem utilizada. A propriedade background-size permite que você altere o tamanho da imagem de fundo para melhor atender sua página. Será possível especificar em termos de porcentagem ou pixels quão grande uma imagem de fundo deve ser. Isto irá permitir a reutilização de imagens em vários contextos diferentes e também expandir um fundo para preencher uma área com mais precisão.

Há os seguintes valores possíveis:

background-size: 100px 100px; redimensiona a imagem para o tamanho especificado. O primeiro valor especifica a largura enquanto o segundo valor especifica a altura da imagem.
background-size: 50% 100%; redimensiona a imagem para o tamanho especificado. As porcentagens são em relação ao tamanho do elemento que contém, sendo o primeiro valor a largura enquanto o segundo valor a altura da imagem.
background-size: contain; diminui a escala da imagem para caber no elemento (manter proporção de pixel).
background-size: cover; aumenta a escala da imagem para caber no elemento (manter proporção de pixel).

OBS: Lembrando-se que para usar a propriedade no navegador Safari e Google Chrome utiliamos antes do código -webkit-, e para o Opera -o-. No entanto, se o seu navegador não suporte a propriedade, então você só vai ver a imagem no canto superior esquerdo da div ou ela no seu tamanho original.

Trabalhando com pixels

Exemplo background-size:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-ohana.jpg) no-repeat;
background-size: 200px 254px;
width:200px;
height:254px;
}

Funciona no: ie2 Backgrounds – Parte 3: background size firefox Backgrounds – Parte 3: background size chrome Backgrounds – Parte 3: background size safari Backgrounds – Parte 3: background size opera Backgrounds – Parte 3: background size

O tamanho original dessa imagem na realidade é de 118px de largura e 150px de altura. Mas com a propriedade background-size nós podemos altera-la da forma que nós interessar.

Trabalhando com porcentagem

Outra forma de utilizar a propriedade é usando porcentagem ao invés de pixels.

Exemplo background-size com porcentagem:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-ohana.jpg) no-repeat;
background-size:100%;
width:150px;
height:191px;
}

Trabalhando com background-size: contain

Para filtrar um pouco mais essa informação no Firefox não funcionará. Vejam o exemplo com o Chrome ou com o Safari. Experimente redimensionar esse Exemplo Live. Mas nem preciso dizer que não funcionará no Internet Explorer né?

Exemplo background-size: contain:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-attachment: fixed;
background-size: contain;
}

Funciona no: ie2 Backgrounds – Parte 3: background size firefox Backgrounds – Parte 3: background size chrome Backgrounds – Parte 3: background size safari2 Backgrounds – Parte 3: background size opera2 Backgrounds – Parte 3: background size

Agora, para quem não conseguiu ver o exemplo em seu navegador, acesse aqui a página com o exemplo e veja também!

EXEMPLO BACKGROUND-SIZE: CONTAIN

OBS: a propriedade “background-attachment” com o valor “fixed” é usada em conjunto em nosso código porque ela vai permitir que a imagem fique fixa conforme redimensionamos a página.

Trabalhando com background-size: cover

Experimente redimensionar esse Exemplo Live.

Exemplo background-size: cover:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-attachment: fixed;
background-size: cover;
}

EXEMPLO BACKGROUND-SIZE: COVER

OBS: a propriedade “background-attachment” com o valor “fixed” é usada em conjunto em nosso código porque ela vai permitir que a imagem fique fixa conforme redimensionamos a página.

Outras aplicações

Segue agora um exemplo simples de redimensionar o logotipo CSS3 como background no canto superior esquerdo e um texto.
Exemplo background-size:

.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-size: 150px 96px;
width: 150px;
height: 96px;
padding: 10px;
}

Esse é um exemplo onde redimensionamos nosso logo original com a propriedade background-size, nós podemos alterar segundo nossa vontade, bastando apenas seguir a proporção para obter uma ótima aparência. Isso não é o máximo?!

Posts Relacionados: