title: How to shift image while using background-position css
body: <p>To style the scrollbar on my page, I used to have the following CSS. It gave me the perfect result and aligned the image in the center of the scrollbar.</p>
  
  <pre><code>background: #3395d2 url('img/thumb.png') no-repeat center;
  border-radius: 8px;
  border: 1px solid #004c98;
  </code></pre>
  
  <p>However, I then I took the background and created a sprite using other small images on my page. Then to style the image on the scrollbar again, I used the following CSS. However, this time it was not aligned in the center.</p>
  
  <pre><code>background: #3395d2 url('img/small-images.png') no-repeat center;
  border-radius: 8px;
  border: 1px solid #004c98;
  background-position: 0 -702px;
  </code></pre>
  
  <p>How can I edit my code so that the image still aligns in the middle of the scrollbar, despite being in a sprite?</p>
  
  <p><a href="http://jsfiddle.net/g5Fz6/" rel="nofollow"><strong>JSFiddle</strong></a></p>