CSS Sprites - Not Just For Background Images?

Question

Can CSS sprites be used for “foreground” images, that is, images that users need to click and interact with and possibly even print?

Instead of using the CSS property background-image . What would you use?

Answer 1

You can use the standard <img /> and place it in a container (e.g. <div /> ) with a limited height / width. Then use relative positioning or negative margins to control the position of the image.

Answer 2

You can do this with less CSS as follows:

 .myClass { background: url(../Images/Sprite.png) no-repeat; height: 20px; width: 40px; background-position: -40px 0; display: block; } .myClass:hover { background-position: -40px -20px; } 

That the class class="myClass" would not only have an image in it, nothing else. It can be a <a> an <input> or a normal <div> , whatever you wish.

This is a background image ... but this is the element you are looking at, nothing in front of this background. Just because you use a background-image for a property does not mean that it is not a foreground element ... like a button that you can click on. You can do it like this:

 <input type="button" class="myClass" /> 

Answer 3

One of the basic requirements that cannot be processed by background images is ARIA. All ARIA requirements will reject the use of background images for meaningful, navigational and other “informational” applications that the screen reader must interpret on behalf of a user with a disability. The ability to change the css expression for the background image for the img tag and the ARIA tag, when necessary, is an important feature in the current regulated development environment.

The answer to the original question is yes! You can use the image that appears in the css background statement. But you have to open the sprite image in the image editor and select the part that represents the sprite you want, and save it as a separate image and link to it in the img tag.

The problem is that often these situations arise in a pre-built management library. Finding and changing code in a library that selects and displays a background image is a bit more complicated, so it’s very difficult to change the code!

Answer 4

You can do this, but you need to use background images for sprites, since you should be able to set the position. This can be used for links or whatever. Look at the Googles help, they use it for buttons on iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif