A simple mixin to use a different background images for HiDPI devices.

_background_image_hidpi.scss

@mixin background-image-hidpi($normalImage, $hdpiImage, $ratio){
  // normal image
  background-image: url('#{$normalImage}');
  // high dpi image
  @include pixel-ratio($ratio){
    background-image: url('#{$hdpiImage}');
  }
}

// This mixin uses the mixin pixel-ratio() which you can find in anoter gist: https://gist.github.com/2ndkauboy/5397402
@mixin pixel-ratio($ratio){
  @media (-webkit-min-device-pixel-ratio: $ratio), (min--moz-device-pixel-ratio: $ratio), (min-resolution: #{$ratio}dppx), (min-resolution: #{$ratio * 96}dpi){
    @content;
  }
}