devicePixelRatio=1/1.5/2のデバイスに1つ1つに対して、3種類のサイズの背景画像を指定する。

devicePixelRatio=1_1.5_2

/* devicePixelRatio=1 & devicePixelRatio未対応ブラウザ */
.className {
     width: 100px;
     height: 100px;
     background: url([email protected]); /* 等倍の画像 */
}

/* devicePixelRatio=1.5 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
     .className {
          background: url([email protected]); /* 1.5倍の画像 */
          -webkit-background-size: 100px 100px; /* WebKit */
          background-size: 100px 100px; /* WebKit以外 */
     }
}

/* devicePixelRatio=2 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
     .className {
          background: url([email protected]); /* 2倍の画像 */
          -webkit-background-size: 100px 100px; /* WebKit */
          background-size: 100px 100px; /* WebKit以外 */
     }
}