imagen de fondo aparece en la parte superior de la imagen en primer plano en Opera y Chrome

Question

Tengo un pequeño lapso de una imagen de fondo. Esta imagen de fondo se desplaza por debajo de imagen en primer plano. Aunque esto funciona perfectamente en IE y FF, que no funciona en Opera y Chrome.

He puesto mi ejemplo aquí . Por favor, vea el bloque con 4 pequeños rectángulos.

Para sugerir una solución.

Answer 1

Es necesario añadir display:block a su lapso.

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

Los elementos en línea no tienen una altura o anchura por lo que todo el fondo se está mostrando en lugar de ser cortado por el tamaño de la imagen.

---

Editar después de los comentarios

¿Hay alguna razón no se puede aplicar la imagen de fondo a la propia etiqueta img? Eso sería más coherente entre navegadores.