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

Tags: css,jquery-ui,css-sprites

Problem :

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.

Solution :

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:

.tablesorter thead tr {
  cursor: pointer;
.headerSortUp:after, .headerSortDown:after {
   margin:0 5px 0 0;
   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:

    CSS Howto..

    How to fix an overlapping image in CSS?

    How can I create CSS styles dynamically?

    How to keep table headers fixed while scrolling down a table

    How to make other line indent using css?

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How to select two different elements with an XPath query

    How to find all possible CSS Styles and Attributes of an Element?

    how to rotate text with css? transform is not supported by current schema?

    How to horizontally and vertically center two images on top of each other?

    How to get less to output a css variable with quotes

    How to generate width CSS from JavaScript / C#

    CSS - How make the page scroll over the edge of the window

    How do you avoid class name collisions? [closed]

    How to save user's choice of theme of web pages

    How to make visual changes with dynamically generated HTML code?

    Check this web optimization report - how can I fix it?

    How to make outer div fit child divs?

    How to refactor an existing project to use Compass?

    css hover : aligning on bottom: how to align on top?

    how to align in centre using html css

    How to best format an HTML form like this where user can dynamically add subfields? (table? list? css3?)

    How does a browser determine which cursor to use if multiple are set via CSS?

    How to create a vertical carousel using plain JavaScript and CSS

    How to create a css hoverover box with two section

    How to apply custom css class to extjs grid column, and remove it with delay?

    How to handle hiding dynamic elements in JQUERY with different names but same CSS class

    How to tell the browser to ignore previous css edits?

    Is it possible to see how your html & css code would look on a mobile device without actually have a website url?

    How do I align these boxes using bootstrap?

    How to change the scrollbar color using css [duplicate]