title: Making CSS Sprites Responsive
body: <p>UPDATE 2:  Making further progress.  Almost there!  </p>
  
  <p>jsFiddle:  <a href="http://jsfiddle.net/persianturtle/Tfemm/6/" rel="nofollow">http://jsfiddle.net/persianturtle/Tfemm/6/</a></p>
  
  <p>The sprite is now 99% responsive, except that the </p>
  
  <pre><code>margin-bottom:  %
  </code></pre>
  
  <p>Does not line up perfectly as the page changes width.  The </p>
  
  <pre><code>margin-left:    %
  </code></pre>
  
  <p>Seems to work great.  </p>
  
  <p>Any thoughts on how to align the margin-bottom perfectly?</p>
  
  <p>UPDATE:  Making progress, but still not yet there.  </p>
  
  <p>Below is the jsFiddle:  <a href="http://jsfiddle.net/persianturtle/Tfemm/5/" rel="nofollow">http://jsfiddle.net/persianturtle/Tfemm/5/</a></p>
  
  <p>The sprite image that I wanted to crop is working responsively, except it is only being cropped horizontally and not vertically.  </p>
  
  <p>The Code below:</p>
  
  <pre><code>&lt;div class="responsive-sprite" style="width: 100%;"&gt;  
  &lt;img alt="Yay for alt tags..." src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" /&gt;  
  &lt;/div&gt; 
  
  img {  
   width: 100%;  
   height: 200%;
   margin-left: -81.869%;  
  }  
  .responsive-sprite {  
   overflow: hidden; 
  }  
  </code></pre>
  
  <p>Can anyone think of a way to crop this vertically as well?</p>
  
  <h2>Below is the original post:</h2>
  
  <p>Is there a way to make CSS sprites responsive?  </p>
  
  <p>Take a look at the attached jsFiddle:  <a href="http://jsfiddle.net/persianturtle/Tfemm/2/" rel="nofollow">http://jsfiddle.net/persianturtle/Tfemm/2/</a></p>
  
  <p>Is there a way to resize this CSS sprite once the container can no longer fit the full size image?</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;h2 class="popular"&gt;&lt;img src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" alt="" /&gt;Featured&lt;/h2&gt;
  
  &lt;/div&gt;
  
  
  
  
  .container {
      width: 20%;
      margin: 0 auto;
  }
  
  h2 {
      overflow: hidden;
      position: relative;
      height: 128px;
      width: 192px;
      max-width: 100%;
  }
  h2 img {
    position: relative;
  }
  h2.popular img {
    top: 0;
    left: -867px;
  }
  h2.popular img:hover {
    top: -128px;
    left: -867px;
  }
  </code></pre>