FREE! Sass (SCSS) mixin for including retina images (useful when developing for iOS).

input.scss

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

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

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

output.css

#foo {
  background-image: url("foobar.png");
  background: repeat; }
  @media (-webkit-min-device-pixel-ratio: 2) {
    #foo {
      background-image: url("foobar@2x.png");
      -webkit-background-size: 10px 20px; } }

@hced: yes, the media query for "retina" displays will override the base style during CSS parsing; no browser to my knowledge is so aggressive as to fetch specified assets before processing all rules.

Can I maybe just suggest use of:

background-image: image-url

Which will then let you use images that are in images_dir, instead of need to add path every time.

@include at2x( 'bghead-xs', 'jpg' );

Merci !

This is great. Agree with Bobz-zg on using image-url. I also made $width and $height optional by defaulting to 100% since that's a common value for a background image that is taking up the full dimensions of its element.

Using scss mixin for background-size also and including non-vendor min-device-pixel-ratio too for future-proofing.

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

hi, how can i add image url path to this mixin ?

-moz-min-device-pixel-ratio should be min--moz-device-pixel-ratio