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

RELEASE / 2024.2.26 UPDATE / 2024.02.26

background-image

css

Retinaディスプレイ対応

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

この記事の目次を表示

1 background-imageをRetina対応する方法
- 1.1 image-setを使用する方法
- 1.2 メディアクエリを使用する方法
2 まとめ

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ディスプレイでは黄色の画像が表示されるようになっています。