Next.jsでnext/imageで最適化した画像を背景画像として出力する（スクロールしても背景画像を固定で表示する） #tailwindcss

ご注意：

理解が甘いので語尾は全部 っぽい です。
何卒よろしくお願いします。

※タイトルが background-image として出力するように勘違いされるかもしれませんが違います。imgタグとして出力されるので勘違いされないようにご注意ください。

next/image について

Next.jsには画像最適化してくれる next/image があります。
便利な next/image ですが、欠点としてはbackground-image で適用することができません。

画像最適化をしなければbackground-imageで適用はできます。
しかし、どうせならNext.jsにお任せして画像の最適化をしたいですよね。

next/image は画面サイズが小さいときは容量の小さいデータをくれるし、画面サイズが大きいときは大きいなりのデータをくれます。

公式ドキュメントにもbackground-imageとして使うためのサンプルが用意されています。（この記事を書いた後に気づきました...。） - https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/background.js

※公式ドキュメントは https://nextjs.org/docs/api-reference/next/image からご覧ください。

※欲を言えば Tailwind CSS で最適化した背景画像を Theme に入れて使いたかったですが、解決策っぽいのは見つかりませんでした。ご存知の方、コメントからお待ちしています。

背景画像をスクロールしても固定されるようにする

※CSSはTailwind CSSを使ってます。

import Image from 'next/image'

const Home = () => {
  return (
    <div>
      <div>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
        <p>hogehogeだよ！</p>
      </div>

      <div className={`fixed top-0 left-0 w-full h-screen z-[-1]`}>
        <Image src={`/images/bg-hoge.jpg`} layout={`fill`} objectFit={`cover`} />
      </div>
    </div>
  )
}

export default Home

position: fixed で固定化し、
top:0; left:0; で左上を基準にし、
width: 100%; height: 100vh; で画面いっぱいにひろげ、
z-index: -1 でレイヤーを一番下にしています。

これでスクロールしても常に背景画像が表示された状態になります！

表示例：

余談： next/image でobject-fit: cover なスタイルを出力してくれてるので、positionの値もfixedに変更するようなオプションが入ってたら最高なのになぁ、と思いました。