How do I use a sprite background image to display once on an element (no-repeat)?

Question

I wish to add a jQuery icon to another class which is added by another plugin (jquery.tablesorter.js), specifically I wish to add the icon ui-icon-triangle-1-n to the .headerSortUp class from tablesorter.

I am trying to add the following class but can't for the life of me how to work out a sprite for it.

table.sortable thead tr .headerSortUp {
  cursor: pointer;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background: url(jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png) 0 -16px;
}

I've not worked with CSS sprites before so am not entirely sure how to do this.

The situation I see is I only want a portion of the background image to appear, but I want that positioned to the right center of the text and no-repeat.

Answer 1

There is an excellent tutorial on background image crop for sprites here: css-background-image-hacks

The trick is to use the pseudo selectors :after or :before to place the icon into the header without having to add an additional element into the html structure.

And here I add a working demo using the tablesorter plugin: http://jsfiddle.net/FXq8b/

.tablesorter thead tr {
  line-height:16px;
  background-color:#ddd;
  cursor: pointer;
}
.headerSortUp:after, .headerSortDown:after {
   content:"";
   float:right;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url('http://www.wooldalejunior.org.uk/ui/vendor/jquery.ui/css/smoothness/images/ui-icons_222222_256x240.png');
   background-position:0 -16px;
}
.headerSortDown:after {
   background-position:-64px -16px;
}

now you just need to move as many times x 16px to the left and up to reach the desired icons (for another example ... up -> background-position: 0 -48px; down -> background-position: -64px -48px ... or up -> background-position: -96px -192px; down -> background-position: -64px -192px, you just need to count how many icons from top and from the left edge your desired icon lies on the image: http://jsfiddle.net/FXq8b/1/).