title: Clip/Crop background-image with CSS
body: <p>I have this HTML:</p>
  
  <pre><code>&lt;div id="graphic"&gt;lorem ipsum&lt;/div&gt;
  </code></pre>
  
  <p>with this CSS:</p>
  
  <pre><code>#graphic { background-image: url(image.jpg); width: 200px; height: 100px;}
  </code></pre>
  
  <p>The background image I'm applying is 200x100 px, but I only want to display a cropped portion of the background image of 200x50 px.</p>
  
  <p><code>background-clip</code> does not appear to be the right CSS property for this. What can I use instead?</p>
  
  <p><code>background-position</code> should not be used, because I'm using the above CSS in a sprite context where the image part I want to show is smaller than the element on which the CSS is defined.</p>