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: 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/).


    CSS Howto..

    How to select XML element by xlink:href attribute with CSS?

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How to align div first left then top in div parent?

    how to decrease space between headings?

    Linkedin Follow Button not showing properly in Firefox

    How to set vertical align of elements that exist into a div tag to center with css? [duplicate]

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    How to download an Html page and its internal files in android?

    customize bootstrap widths do not know how

    How to position an inner - inner tag at different position?

    How to display UpdateProgress at the center of a grid view with CSS?

    How to disable the 'save image as' popup for smartphones for

    how to use {{$variable}} in css , Laravel 5.1 [closed]

    How to dynamically change pseudo-class value in css

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How to apply CSS styles to links that appear in table headers?

    how to position subheader right under header [closed]

    How to change the color of a div in css when another one is on focus

    How to select only one child element in CSS?

    How to add css properties inside the PHP tag

    How can I wrap text around a bottom-right div?

    How to use Bootstrap 3 gradient for background in CSS? [closed]

    how to create divs rowwise in css

    How to fix the headline row in a table using css? [closed]

    With html tables, using CSS, how do I get the tables next to each other?

    How design an unordered list of images horizontally with Bootstrap?

    How to have a background image size (without affecting the div)?

    How to code html mailings?

    How to center a navigation bar with CSS or HTML?

    How to hide the information, just only show when button is clicked html, css. javascript?