Takazudo
3/11/2011 - 8:23 AM

page.html

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

<script src="modernizr-1.7.min.js"></script>
/* devicePixelRatio=1 & devicePixelRatio未対応ブラウザ */
.className {
     width: 100px;
     height: 100px;
     background: url(test@1x.png); /* 等倍の画像 */
}

/* 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(test@2x.png); /* 2倍の画像 */
          -webkit-background-size: 100px 100px; /* WebKit */
          -moz-background-size: 100px 100px; /* moz */
          -o-background-size: 100px 100px; /* opera */
          background-size: 100px 100px; /* WebKit以外 */
     }
}