title: CSS: displaying one particular icon from an image file
body: <p>How does one set the CSS <code>background-image</code> property to just load one particular icon from a larger image?</p>
  
  <p>For example, jQuery UI themes its Dialog widget using the following PNG image file:
  <a href="http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png" rel="noreferrer">http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png</a>, which encodes a bunch of icons in it. Then, as demoed in <a href="http://docs.jquery.com/UI/Dialog" rel="noreferrer">http://docs.jquery.com/UI/Dialog</a> the bottom right resize handle loads the very last icon from the PNG.</p>
  
  <p>Using Firebug I can see a bunch of CSS properties like <code>ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se</code> applied that refers to <code>url(ui-icons.xx.png)</code>, but nothing about selecting a particular icon.</p>