Redimensionar imagem no IE com CSS e HTML

Devido ao internet explorer não aceitar grande parte das propriedades CSS (como o background-size), vamos precisar fazer um macete para redimensionarmos imagens nele.

Tutorial testado no IE 6, Firefox 3.6, Chrome 9 e Ópera 11.

Imagem por: Marjan Krebelj

Caso queira redimensionar imagens usando CSS (background-size) acesse:

• redimensionar imagens com CSS3.

Para começar vamos fazer uma div que conterá a imagem a ser redimensionada:

Créditos: 10calco.blogspot.com
<div id='test'>
 <ul>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

Após a tag UL vamos acrescentar a imagem e vamos definir uma classe para ela através do seguinte código em negrito:

<div id='test'>
 <ul><img class='bg' src='plano_de_fundo.jpg'/>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

No CSS vamos definir o tamanho da div e aplicar z-index igual a 1 ao LI:

#test {
width:500px;
height:100px;
}

#test ul li {
z-index:1;
}

Por último vamos colocar a imagem por trás do texto com z-index igual a -1, definir posição absoluta e deixar a imagem do mesmo tamanho da div:

#test img.bg {
z-index:-1;
position:absolute;
width:500px;
height:100px;/* Créditos: 10calco.blogspot.com */
}

-Nota: Se o tamanho da imagem estiver em porcentagem ela só ficará correta no IE.
[Editado: 08/04/2011] Para resolver esse problema veja: Imagem auto ajustável com CSS.[/Editado]

Conhece algum outro macete ou algum aprimoramento para este? Então poste nos comentários ou entre em contato