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

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

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

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")
    );

}

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

CSS

この記事を書いた人

くまだ

記事一覧