CodePen

HTML

            
              <h2>Sprite @1x</h2>

<span class="icon"></span>

<h2>Sprite @2x</h2>

<span class="icon retina"></span>
            
          
!

CSS

            
              .icon {
  background: url(http://f.cl.ly/items/1V3y0J0i1V231j2S1t2K/sprite-1x.png);
  width: 50px;
  height: 50px;
  display: inline-block;
}

.icon:hover,
.icon.retina:hover {
  background-position: 0 -50px;
}

@media 
  (min--moz-device-pixel-ratio: 2),
  (-o-min-device-pixel-ratio: 2/1), 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-device-pixel-ratio: 2) {

  .icon.retina {
    background: url(http://f.cl.ly/items/2Z1f0j0D2T0v3j3A0215/sprite-2x.png);
    background-size: 100px 100px;
  }
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................