CSS Sprites - not only for background images?

Question

Is it possible to use CSS sprites for "foreground" images -- i.e. images that users are supposed to click on and interact with and maybe even print?

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

Answer 1

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

Answer 2

I have solved this problem using img tags and using the object-fit and object-position properties in my css. Here's a sample of the html and css I used:-

HTML

<img src="<your image source>" class="sprite-icon sprite-icon-1 " />

CSS

.sprite-icon {
  height: 20px;
  width: 20px;
  object-fit: none;
}

.sprite-icon-1 {
  object-position: 0 0;
}

.sprite-icon-2 {
  object-position: -20px 0;
}

Obviously, you need to change the position and the size parameters according to the sprite you are using. For a full working example, check out this fiddle

Answer 3

You can do this with less CSS like this:

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

Whatever has the class class="myClass" will have just the image in it, nothing else. This can be a <a> an <input> or a normal <div>, whatever you want.

It's a background image...but it's the element you're looking at, nothing's in front of that background. Just because you're using background-image for the property doesn't mean it's not a foreground element...like a button you can click on. You can do that like this:

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

Answer 4

One primary requirement that cannot be handled by background images is for ARIA. All ARIA requirements will reject the use of background images for meaningful, navigational, and other 'informative' uses that a screen reader must interpret on behalf of a user with a disability. Being able to swap out a background image css statement for an img tag and some ARIA tagging whenever necessary is a critical feature in the current regulated development environment.

The answer to the original question is yes! It is possible to use the image that is displayed in a css background statement. But you must open the sprite image in an image editor and select out the portion that represents the sprite you want and save it as a separate image and reference it in an img tag.

The challenge is that often, these situations arise in a pre-built control library. Finding and altering the code in the library that selects and displays the background image is a little difficult, changing out the code is hard!

Answer 5

@Waughwaugh's answer https://stackoverflow.com/a/50715682/2733244 using object-fit and object-position is a simple and solid solution for this problem. Its only downside is that it won't support some older browsers. If you still need to target IE11 you can instead work with clip-path and negative margins:

.sprite {
    width: 240px;
    height: 20px;
}
.sprite-1 {
    clip-path: polygon(60px 0, 80px 0, 80px 20px, 60px 20px);
    margin-left: -60px;
    margin-right: -160px;
}

Full demo: https://jsfiddle.net/wortwart/8omfcyxb/10/

Using "real" images instead of background is often semantically better (e.g. for icons) and can have benefits for accessibility: If the image has not loaded or was blocked by the user we still have <img>'s built-in alt description. Accessibility is more than just screenreaders ...

The best approach of course is to ditch CSS sprites and simply load the images separately with HTTP/2.

Answer 6

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