A Pen by Malkyne.

index.html

<div class="container">
  <div class="row">
    <div class="col">
      <p>This is the original sprite atlas, at its original size.  I painted the background magenta, so you could see if there was color bleed from the floating point percentage calculations.  As you can see, when I blow these textures up really big, there is some bleed (especially on retina displays), so you should add a 1px transparent pad in your atlas, if you're going to go up in size):</p>
      <img alt="Whole Atlas" src="http://malkyne.org/basement/images/misc/test.png" width="256px" height="256px" />
      
      <p>Try out the hover!</p>

      <div class="sprite-container">
        <img class="test-button" alt="Sprite Button" src="http://malkyne.org/basement/images/misc/test.png" />
      </div> 
    </div>
  
    <div class="col">
      <div class="sprite-container">
        <img class="wombat-banner" alt="Wombat Banner" src="http://malkyne.org/basement/images/misc/test.png" />
      </div>
      <div class="row">
        <div class="col">
          <p>This is the green box:</p>
          <div class="sprite-container">
            <img class="green-box" alt="Green Box" src="http://malkyne.org/basement/images/misc/test.png" />    
          </div>    
        </div>
        <div class="col">
          <p>This box will be orange on retina displays:</p>
          <div class="sprite-container">
            <img class="retina-box" alt="Retina Box" src="http://malkyne.org/basement/images/misc/test.png" />    
          </div>    
        </div>
      </div>
    </div>
  </div>
</div>

Responsive-CSS-sprites-with-real-img-tags..markdown

Responsive CSS Sprites with Real img Tags

This expands upon the ideas in this article:

http://openmonkey.blogspot.com/2012/04/truly-responsive-css-sprites.html

Here, we show how to make Reuben Wilson's approach work with images of arbitrary sizes and locations in the file, instead of just a vertical strip.

A Pen by Malkyne on CodePen.

License.

style.css

* {
  box-sizing: border-box;  
}

html, body {
  width:100%;
  background:#000;
  color: #ffffff;
}

/* Simple 2-column responsive layout (mobile first) */

.container {
  margin-left: auto; 
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.col {
  position: relative;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  
  .col {
    width: 50%;
    float: left;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}


/* Sprite Infrastructure */

.sprite-container {
  width: 100%;
  overflow: hidden;
}

.sprite-container > img {
  display: block;
}

/* Sprite Definitions */

/* Here are the magic formulas:

  width = 100 * Sprite Atlas Width / Sprite Width
  
  margin-top = 100 * Distance From Top of Sprite Atlas to Sprite / Sprite Width
 
  margin-bottom = 100 * Distance From Bottom of Sprite Atlas to Sprite / Sprite Width
  
  margin-left = 100 * Distance From Left of Sprite Atlas to Sprite / Sprite Width
*/


.test-button {  
  width: 246.1538461538462%;
  margin-top: -15.3846125%;
  margin-bottom: -192.3076923076923%; 
  margin-left: -15.3846125%;
}  

.test-button:hover {
   margin-left: -130.7692307692308%; 
}

.wombat-banner {
  width: 114.2857142857143%;
  margin-top: -32.14285714285714%;
  margin-bottom: -39.28571428571429%;
  margin-left: -7.142857142857143%;
}

.green-box {
  width: 800%;
  margin-top: -575%;
  margin-bottom: -125%;
  margin-left: -150%; 
}

.retina-box {
  width: 1066.666666666667%;
  margin-top: -766.6666666666667%;
  margin-bottom: -200%;
  margin-left: -66.66666666666667%;   
}

/* RETINA ONLY */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

  .retina-box {
    width: 640%;
    margin-top: -460%;
    margin-bottom: -80%;
    margin-left: -220%;
  }
}