【CSS】背景画像をimage-setで出しわける

どうも、くまだです。

CSSのimage-set()を使って背景画像を出しわけ。

pictureタグで画像出しわけはこちら。

pictureタグで画像をレスポンシブごとに切り替える

pictureタグを使って画像をレスポンシブごとに切り替えることができます。

weblife.ppmp556.com

image-set

画像を出しわけるといえば、pictureタグがあります。

例えば、以下のようにWebP形式対応ブラウザではWebPの画像が表示され、それ以外のブラウザではWebp形式ではない画像が表示される、という感じです。

<div class="image">
    <picture>
      <source srcset="dummy.webp" type="image/webp">
      <img src="dummy.png" />
    </picture>
 </div>

このやり方はimgタグでは対応できますが、背景画像backgroudで対応したい場合もあります。

その場合は、以下のようにimage-set()を使えばpictureタグと同様のことができます。表示させる画像には画像形式のtype（フォーマット）を指定します。

.image {
  background-image: image-set(
    url(sample.webp) type("image/webp"),
    url(sample.png) type("image/png")
    );
}

こちらの場合も、WebP対応ブラウザではWebP画像が表示され、それ以外のブラウザではWebP画像ではないほうが表示されます。

image-setで設定した画像がすべて読み込まれなくなったとき用に、background-image: url(~~)を指定しておくのもいいと思います。

.image {
  background-image: url(dummy.png); /* 以下の画像がすべて読み込まれなかったとき用*/
  
　background-image: image-set(
    url(sample.webp) type("image/webp"),
    url(sample.png) type("image/png")
    );

}

ここまで読んでくださりありがとうございました。