imagem de fundo está aparecendo no topo imagem de primeiro plano de no Opera e Chrome

Question

Eu tenho uma pequena extensão de uma imagem de fundo. Esta imagem de fundo rola imagem de primeiro plano a seguir. Enquanto isso funciona perfeitamente no IE e FF, ele não funciona no Opera e Chrome.

Eu coloquei meu exemplo aqui . Consulte o bloco com 4 pequenos retângulos.

Por favor solução sugerir.

Answer 1

Você precisa adicionar display:block à sua extensão.

<span style="display:block; background: url(&quot;/resources/images/strength_bgr.gif&quot;) no-repeat scroll 0pt -20px transparent;">
  <img alt="test" src="/resources/images/strength.gif">
</span>

elementos

Inline não tem uma altura ou largura para todo o fundo está sendo exibido em vez de ser cortada pelo tamanho da imagem.

---

Editar após comentários

Existe algum motivo você não pode aplicar a imagem de fundo para a própria tag img? Isso seria mais consistente cross-browser.