Retina background image.

retina.scss

/*
  Set a background image at 1x and 2x.
  https://gist.github.com/3895807
  @param {String} $name Image name.
  @param {String} $ext File extension, e.g.: '.png'.
*/
@mixin retina-bg($name, $ext) {
  @include squish-text;
  
  $image: '#{$name}#{$ext}';
  $image2x: '#{$name}@2x#{$ext}';
  
  $imageUrl: image-url($image, true);
  $image2xUrl: image-url($image2x, true);
  
  width: image-width($image);
  height: image-height($image);
  background: 0 0 no-repeat transparent url($imageUrl);
  
  @include retina {
    background-image: url($image2xUrl);
    background-size: 100%;
    
    .lt-ie9 & {
      background-image: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image2xUrl}',sizingMethod='scale');
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image2xUrl}',sizingMethod='scale')";
    }
  }
}

/*
  Retina mixin.
*/
@mixin retina($ratio: 1.3) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and (-o-min-device-pixel-ratio: ($ratio * 10) / 10),
  only screen and (min-resolution: #{round($ratio * 96)}dpi),
  only screen and (min-resolution: #{$ratio}dppx) {
    @content;
  }
}