title: retina display - fitting large background image in css into smaller dimensions
body: <p>I have the following css for my toolbar which displays social icons:</p>
  
  <pre><code>.toolbar ul li {
      height: 102px;
      width: 102px;
      display: block;
      float: right;
      margin: 0 0 0 7px;
      padding: 0;
      background: url(images/social_icons.png) center top no-repeat;
  }
  .toolbar ul li a {
      width: 100%;
      height: 100%;
      display: block;
      text-indent: -9999px;
  }
  .toolbar ul li.facebook {
      background-position: 0 0px;
  }
  .toolbar ul li.facebook:hover {
      background-position: -102px 0px;
  }
  .toolbar ul li.twitter {
      background-position: 0 -102px;
  }
  .toolbar ul li.twitter:hover {
      background-position: -102px -102px;
  }
  </code></pre>
  
  <p>However, I want my icon to be only 34px x 34px when rendered in HTML. The reason for the higher resolution image is so that I can display it better on retina screens. However, it doesn't seem to work when I change to:</p>
  
  <pre><code>.toolbar ul li {
      height: 34px;
      width: 34px;
      display: block;
      float: right;
      margin: 0 0 0 7px;
      padding: 0;
      background: url(images/social_icons.png) center top no-repeat;
  }
  </code></pre>
  
  <p>Any ideas? Much appreciated.</p>