背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのやり方です。これから新しくサイトを作る場合なんかに役立つかと思います。Retinaディスプレイは解像度が縦横2倍（面積は4倍）なので、それ専用の画像を用意しておく必要があります。ということで、以下、やり方です。
[ads_center]
-webkit-min-device-pixel-ratioを使う
Retinaディスプレイかどうかを判別するには「-webkit-min-device-pixel-ratio: 2」を使っていきます。例えば、通常の背景画像のロゴを指定する場合には以下のようにするとします。
#logo {
width: 200px;
height: 100px;
background: url(images/logo.png) no-repeat;
display: block;
text-indent: -9999px;
}
上記の場合は普通に横200px、縦100pxの画像（logo.png）を用意すればいいですよね。これと同時にRetinaディスプレイの場合のみ、それ専用のロゴ画像を表示させるには以下を上記のCSSの下に追加します。
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#logo {
width: 200px;
height: 100px;
background: url(images/logo-retina.png) no-repeat;
background-size: 100%;
display: block;
text-indent: -9999px;
}
}
この場合は縦横ともに2倍の大きさのロゴ画像（logo-retina.png）を用意してあげます。ちなみにここでは横400px、縦200pxになります。
ポイントは縦横2倍にしたロゴ画像をwidthとheightを使って2分の1のサイズを指定して、さらにbackground-sizeを100%にすることで縦横2倍の画像を標準サイズに圧縮します。
これにより、Retinaディスプレイの場合のみ、高解像度のロゴが表示されるようになります。要するに、縦横2倍にした画像を用意して上記のCSSを加えるだけでRetinaに対応できるのでやっておいて損はないかと思います。
ロゴはスマホなんかでは一番最初に目に留まる場所でもあるので、ここだけでもRetinaに対応させておきたいですよね。
ということで、背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方でした。
