title: How to use a sprite for a background on a div, positioning to a part of the sprite to the right of the div
body: <p>The div that I want to apply a background on is larger than my sprite, and the part of the sprite that I want to use as the background is 100px from the top of the sprite.</p>
  
  <p>How can I set the background of the div to be the part of the sprite I want, <em>and</em> have it be positioned to the right side of the div.</p>
  
  <p>What I have: <a href="http://jsbin.com/yibesu/1/edit?html,css,output" rel="nofollow">http://jsbin.com/yibesu/1/edit?html,css,output</a></p>
  
  <p>I want the "what-i-want" background to be pushed to the right side of the div, and the rest of it be the red color. </p>
  
  <p>My CSS:</p>
  
  <pre><code>div { 
    background: url('http://i.imgur.com/VBe5ey2.png') red;
    background-position: 0 -100px;
    background-repeat: no-repeat;
    width: 400px; 
    height: 200px; 
  }
  </code></pre>
  
  <p>It's like I want the background position to be "0 -100px" <em>and</em> pushed to the right of the div. The sprite's width is smaller than the div. Is this possible? Or do I need to just rip the part out of the sprite and have it be it's own image? Thanks!</p>