こんにちは！前回のブログでwebpというgoogleが作った軽ーい画像の拡張子をwordpressやhtmlで表示させるやり方をお知らせしました！
もしまだ読んでいない方や気になる方はこちらからどうぞ！
さて今回はそんなwebpを背景画像として使うためにやることを書いていきますね！
普通にbackground-imageで使うだけじゃダメ?
safariなどもwebp対応を始めた今現在ですが、IEなどの一部ブラウザではwebp対応をしていません。
(IEはサポート終了しているので今後も対応することはないかなと予想しております。)なので前回同様webpに対応しているブラウザとそうではないブラウザで分ける必要があるんですよね…。(めんどくさい)
modernizr.jsをダウンロードする
背景として画像を使用する場合はmodernizr.jsを使うのが簡単かなと思います。早速やってみましょう
上記リンクをクリックし、赤紫色の「Add your detects」のボタンを押しましょう。
ページ遷移したら灰色の画面をスクロールするとwebpと書かれたところが出てきますのでプラスボタンを押しましょう。(写真の①)
押しましたら右上の赤紫色の「BUILD」を押し、Downloadをしましょう。(写真の②)
modernizr.jsを読み込んで使う
ダウンロードが終わったら使いたいフォルダに持っていき、headタグの上あたりで読み込みましょう。
パスは各々の環境によって変えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="modernizr-custom.js"></script>
<title>背景画像にwebpを使う</title>
</head>
<body>
<div class="mv"></div>
</body>
</html>次にcssで以下のように指定してみまよう
.webp .mv {
width: 100%
height: 100vh;
background-image: url("mv.webp");
}
.no-webp .mv{
width: 100%
height: 100vh;
background-image: url("mv.jpg");
}modernizr.jsのおかげで、webp対応しているブラウザには.webp、対応していないブラウザには.no-webpと設定してくれるのでそれに当てはまるようにcssを作ります。
ちなみにscssでは下記のような感じで作ればいいかなと思います。
.mv{
width: 100%;
height: 100vh
background-image: url(mv.webp);
.no-webp & {
background-image: url(mv.jpg);
}
}
これで完了です。後は適宜調整してみてください。mvなどの背景画像は結構重いので使うことをお勧めします！！