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; } }

This is great! I can't currently use Compass (long story) but this looks like it'll work really well for me.

In your media query you can also support Firefox with:
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {

Cool, glad you found it helpful @jgillman. I've added your fix for Firefox.

:-)

Brilliant!

👍 thanks!

This works better for me in the latest Safari, Firefox and Chrome (note the min-resolution and background-size changes).

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

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

Heck yes. Very nice.

Awesome, thanks for the great snippet. I added width: and height: properties to the mixin to set those as well.

Comes in really handy, thank you so much.

For those not wanting to manually create their sprite classes for each icon, it is possible to create sprite maps for 1x and 2x icons to be used on retina devices using the same, automatically generated, style classes:

Compass Retina Spriting

Doesn't this load resources twice on retina devices? I.e. will foobar.png be skipped in the gist's example on a retina device?

@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