page.html

<!--
     see http://www.modernizr.com/docs/#backgroundsize
-->

<script src="modernizr-1.7.min.js"></script>

style.css

/* 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) {
  .backgroundsize .className {
    background: url([email protected]); /* 2倍の画像 */
   -webkit-background-size: 100px 100px; /* 古いWebKit */
    background-size: 100px 100px; /* WebKit以外 */
  }
}

/* GeckoとPresto対応するなら */
@media only screen and (moz--min-device-pixel-ratio: 1.5),
 only screen and (-o-min-device-pixel-ratio: 3/2) {
  .backgroundsize .className {
    background: url([email protected]);
    background-size: 100px 100px; /* prefixは要らない */
  }
}

https://gist.github.com/865619 は-moz-と-o-のプロパティを付け足してるけど、それじゃ意味がないのでfork。

• -moz-background-size, -o-background-size を削除。device-pixel-ratio に対応するバージョンはどっちも background-size に対応してる。
• Gecko, Presto 用のコード追加。Geckoは moz--min-device-pixel-ratio と指定しないとだめ。Prestoは 値に数値が使えず、3/2 って書かないとだめ（アスペクト比だからそりゃそうだ）。

viewportの設定にdpxratioも依存するから、これで解決できない場合も出てくると思うけど。

https://gist.github.com/886266/140a0e4d54ba10cc883ed1d3521928b0797676eb をもうすこしスマートにした。

• background-size: 100% 100% にして.classNameに移動。widthとheightを参照してくれるからピクセルで指定する必要ない。
• "only screen and " を削除。screen削除しちゃうとallとして扱われるけど、デバイスピクセルなんて書いてあるものが紙で適用されるわけないと思う。
• min-device-pixel-ratio 削除。そもそも仕様なくて値が決まってないのに prefix なしのを書くと逆に危ない。