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

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