フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【CSS】background-imageをRetina対応する方法

background-image
css
Retinaディスプレイ対応

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

今やWEBサイトを閲覧する端末はパソコンよりスマホの方が多い世の中。
Retinaディスプレイに対応するには画像を複数枚用意したり、CSSの記述量が増えたり以前より作業量は増えてしまいましたが、現在のWEBサイト制作現場では必須とも言える作業のひとつです。
今回の記事ではbackground-imageプロパティを使用する際にRetinaディスプレイに対応する方法をご紹介したいと思います。

background-imageをRetina対応する方法

image-setを使用する方法

まずはCSSのimage-set関数を使用してRetinaディスプレイに対応する方法からご紹介します。
image-set関数を使用する場合、以下のようにbackground-imageプロパティを記述します。

body {
    background-image: url(../images/bg.jpg);
    background-image: image-set(url(../images/bg.jpg) 1x, url(../images/bg@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/bg.jpg) 1x, url(../images/bg@2x.jpg) 2x);
}

通常ディスプレイの場合は「bg.jpg」、Retinaディスプレイ(2x)の場合は「bg@2x.jpg」が表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上のサンプルは通常ディスプレイでは赤色の画像、Retinaディスプレイでは黄色の画像が表示されるようになっています。

メディアクエリを使用する方法

続いて、メディアクエリを使用すしてRetinaディスプレイに対応する方法をご紹介します。
メディナクエリを使用する場合は、以下のようにbackground-imageプロパティを記述します。

body {
    background-image: url(../images/bg.jpg);
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx) {

    body {
        background-image: url(../images/bg@2x.jpg);
    }

}

こちらの場合も、通常ディスプレイの場合は「bg.jpg」、Retinaディスプレイ(2x)の場合は「bg@2x.jpg」が表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上のサンプルも通常ディスプレイでは赤色の画像、Retinaディスプレイでは黄色の画像が表示されるようになっています。

まとめ

いかがでしたか?
今回ご紹介した方法以外にもJavaScriptを使用する方法などRetinaディスプレイに対応する方法は複数あります。
最初にも書きましたが、今のWEB制作現場では必須ともいえるRetinaディスプレイへの対応。
どの対応方法が最適なのかプロジェクトごとに選択していきましょう。