background image is appearing on top of foreground image in Opera and Chrome

Question

I've a tiny span with a background image. This background image scrolls below foreground image. While this works perfectly in IE and FF, it doesn't work in Opera and chrome.

I've put my example here. PLease see the block with 4 small rectangles.

PLease suggest solution.

Answer 1

You need to add display:block to your span.

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

Inline elements do not have a height or width so the whole background is being displayed instead of being cropped by the image size.

---

Edit after comments

Is there any reason you can't apply the background image to the img tag itself? That would be more consistent cross-browser.