FREE! Sass (SCSS) mixin for including retina images in Webkit and Mozilla browsers.

input.scss

@mixin background-image-retina($file, $type, $width, $height:$width) {
  background-image: url($file + '.' + $type);

  @media all and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($file + '@2x.' + $type);
      -webkit-background-size: $width $height;
      -moz-background-size: $width $height;
      background-size: $width $height;
    }
  }
}

// Example
#foo {
  @include background-image-retina('foobar', 'png', 10px, 20px);
  background: repeat;
}

// Or if your image is square:
#bar {
  @include background-image-retina('bazqux', 'png', 10px);
}

output.css

#foo {
  background-image: url("foobar.png");
  background: repeat; }
  @media all and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 2) {
    #foo {
      background-image: url("[email protected]");
      -webkit-background-size: 10px 20px;
      -moz-background-size: 10px 20px;
      background-size: 10px 20px; } }


#bar {
  background-image: url("bazquz.png");
  background: repeat; }
  @media all and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 2) {
    #bar {
      background-image: url("[email protected]");
      -webkit-background-size: 10px 10px;
      -moz-background-size: 10px 10px;
      background-size: 10px 10px; } }