menu-inline

Redimensionar imagem com CSS - background-size

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

CSS3 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:

Links recomendados:

Comentários 21 comentários

Douglas Barbosa disse...

SENSACIONAL....Estava ha dias tentando redimensionar o background do meu blogger e nao conseguia de jeito nenhum, se nao fosse por uma simples linha de comando explicada aqui...funcionou! Parabens e valeu pela dica!

aba disse...

Olá Douglas. Bom saber que o 10calco esta sendo útil.
Obrigado pela visita e pelo comentário!

Anônimo disse...

Perfeito, funcionou direitinho, parabéns, vocês são o máximo.

aba disse...

Obrigado pela visita.

Anônimo disse...

valew pela dica muito bom msm me ajudo muito ^^

Anônimo disse...

perfeito.. o código funcionou perfeitamente no mozilla e no chrome.. porem não funcionou no explorer.. há algum meio de fazer funcionar no explorer?

aba disse...

Obrigado a todos pelos comentários.

O ie não aceita o background-size, então fiz um tutorial com um macete para isso: Redimensionar imagem no IE com CSS e HTML

Carol disse...

Muito bom!

Anônimo disse...

Valeu amigo ajudou muito!

Alberto disse...

Man, faz 2 dias que eu to procurando isso e não achei. Vlw mesmo, ajudou muito!

Anônimo disse...

completamente perdida pq a imagem n está linkada nem encontro esses códigos iniciando com "#div e seletor" tá tudo na base do . e do /*

complicado a mais de 1 ano procurando solução disso :(((((((((((((((((((((((((((((((((( mas q bom que funcionou para os demais.

aba disse...

Olá pessoal! Obrigado pelas visitas e comentários.
Quanto ao último comentário, recomendo dar uma lida no site do Maujor para se familializar com os códigos.
Qualquer coisa entre em contato conosco.

Abraços.

Unknown disse...

Ajudou muito =D

carioca F1 disse...

Muito bom Parabéns muito bem explicado mano!

Tonimar Rodrigues disse...

Apesar de muito antigo ser esse post, é muito útil!

PopCurso disse...

Incrível, mesmo sendo antigo, foi ULTRA MEGA útil !

Unknown disse...

você é, muito, muito dez... estive olhando por mais ou menos 20 sites e em nenhum tinha conseguido, mas graças a você eu consegui. agradeço de coração.

http://trilhadosfilmes.blogspot.com.br/

Unknown disse...

Cara estava a traz de uma luz no fim do túnel, e encontrei aqui. Obrigado e parabéns.

Vinicius Ferreira de Oliveira disse...

Funcionou perfeitamente, muito bom seu artigo, parabéns...

Ricardo disse...

Obrigado.

Unknown disse...

Cara, Perfeito, Super me ajudou....