Sprite Fallback

Question

I have a number of images on a page contained within a single sprite image, these images must be contained within the single sprite due to other requirements of the site.

Whilst this is working fine in most browsers I have an issue on Opera Mini where it is not rendering the sprite at all and just displaying the whole image.

Is there any CSS that can be used to provide a text alternative when the browser is unable to render the sprite?

Answer 1

Little confused. The sprite is not rendering but is displaying the whole image? Do you see all the sprites at once, or none at all?

You might use browser detection for opera mini (and any other mobile browsers where the rendering is not working as expected).

Add the desired text to the sprite element, and use a large negative text-indent to hide the contents.

Disable the indent and background images for unsupported browsers.

allbrowsers.css

div.sprite {
  width:20px;
  height:20px;
  background:transparent url(img/mysprites.gif) no-repeat scroll top left;
  overflow:hidden;
  text-indent:-5000px;
}
#first_sprite {
  background-position:20px 40px;
}

mobilebrowsers.css

div.sprite {
  background-image:none;
  text-indent:0;
}

page

<div id="first_sprite" class="sprite">Alternate text</div>