retina_background.css

.logo {
  background: url("logo.png") no-repeat;
}

@media (min--moz-device-pixel-ratio: 1.3), 
       (-o-min-device-pixel-ratio: 2.6 / 2), 
       (-webkit-min-device-pixel-ratio: 1.3), 
       (min-device-pixel-ratio: 1.3), 
       (min-resolution: 1.3dppx) {
  .logo {
    background-image: url("logo2x.png");
    background-size: 100px 25px;
  }
}

retina_background.scss

// source: http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}