High DPI CSS image backgrounds with robust fallbacks

gistfile1.css

compass-image-set(W, H, IMG1, BP1, IMG2, BP2, ..., IMG_N, BP_N)


/** Default fallback */
sel {
  background-image: url($IMG1);
  background-size: $W, $H;
}

/* First pixel ratio breakpoint */
@media 
    (min--moz-device-pixel-ratio: $BP2),
    (-o-min-device-pixel-ratio: $BP2),
    (-webkit-min-device-pixel-ratio: $BP2),
    (min-device-pixel-ratio: $BP2) {

  sel {
    background: url($IMG2);
  }
}
/* Second pixel ratio breakpoint */
@media
    (min--moz-device-pixel-ratio: $BP3),
    (-o-min-device-pixel-ratio: $BP3),
    (-webkit-min-device-pixel-ratio: $BP3),
    (min-device-pixel-ratio: $BP3) {

  sel {
    background: url($IMG3);
  }
}
/* More breakpoints if needed */

/* The new image-set way */
sel {
  background-image:  -webkit-image-set(
    url($IMG1) ${BP1}x,
    url($IMG2) ${BP2}x,
    url($IMG3) ${BP3}x
  );
}