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]); /* 等倍の画像 */
    -webkit-background-size: 100% 100%; /* 古いWebKit用 */
    background-size: 100% 100%; /* 100%にしといて .className の幅と高さを参照 */
}

/* devicePixelRatio=1.5以上 */
@media (-webkit-min-device-pixel-ratio: 1.5),
 (moz--min-device-pixel-ratio: 1.5),
 (-o-min-device-pixel-ratio: 3/2) {
  .backgroundsize .className {
    background: url([email protected]); /* 2倍の画像 */
  }
}

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 なしのを書くと逆に危ない。