Redimensionar imagem com CSS - background-size

Neste tutorial veremos como redimensionar imagens usando CSS, através da propriedade "background-size".

Imagem por: mauricesvay

Se a imagem que será redimensionada estiver em uma tag html <img src="..."/>, utilizamos width e height na própria tag ou no CSS:

/* Créditos: 10calco.blogspot.com */
seletor img {
width:xx; /* largura */
height:xx; /* altura */
}

Porém se a imagem estiver no CSS, como no exemplo abaixo:

#div {
background-image: url(imagem.jpg);
}

Usaremos o background-size. E nosso exemplo fica assim:

#div {
background-image: url(imagem.jpg);
background-size:100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
/* Créditos: 10calco.blogspot.com */

Os valores 100% 100% representam respectivamente largura e altura, que devem ser alterados para os valores desejados nas cinco linhas.

Lembrando que essa é uma técnica de CSS3 que ainda não está totalmente funcional, então por isso foram acrescentados os códigos "-webkit-", "-o-", "-khtml-" e "-moz-".

-09/09/2010: Acrescentado propriedade "-moz-background-size", o que torna o código funcional com Mozilla Firefox.


Esta técnica não funciona no Internet Explorer, para isso veja:

• redimensionar imagens no ie com css e html.

Links recomendados:

• CSS3 Info - background-size
• W3C - background-size