🐈

Next.jsで背景画像を設定する方法

2025/01/15に公開

こんにちは、うさぎです。

今回は、Next.jsで背景画像を設定する方法について解説します。特にページ全体に背景画像を設定する方法を、わかりやすく説明します。

はじめに

Webサイトの見た目を華やかにする方法の一つとして、背景画像の設定があります。Next.jsでは、next/imageコンポーネントを使用することで、最適化された画像を簡単に扱うことができます。

実装手順

まず、画像を配置する場所を確認しましょう。Next.jsプロジェクトでは、通常publicフォルダ内に画像を配置します:

your-project/
├── public/
│   └── images/
│       └── space-background.jpg  // ここに画像を配置
└── ...

次に、背景画像を設定したいページのコンポーネントを編集します。今回は以下の3つのポイントを押さえて実装します:

  1. next/imageのインポート
  2. 背景画像の設定
  3. オーバーレイの追加(オプション)

コードの解説

実際のコード例を見てみましょう:

import Image from "next/image";

export default function Contact() {
  return (
    <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gray-900">
      {/* 背景画像 */}
      <Image
        src="/images/space-background.jpg"
        alt="Space background"
        fill
        className="object-cover"
      />

      {/* オーバーレイ */}
      <div className="absolute inset-0 bg-black opacity-50"></div>

      {/* コンテンツ */}
      <div className="relative z-10 container mx-auto px-4 py-16">
        // ここにコンテンツを配置
      </div>
    </div>
  );
}

ポイント解説

  • 📌 relative と min-h-screen: 親要素に relative を設定し、最小高さを画面いっぱいに
  • 📌 next/image の fill プロパティ: 親要素いっぱいに画像を表示
  • 📌 object-cover: アスペクト比を保ったまま親要素を覆うように表示
  • 📌 オーバーレイ: 背景画像の上に半透明の層を追加して、コンテンツを見やすく
  • 📌 z-index (z-10): コンテンツを最前面に表示

よくある質問

  • Q: 画像が表示されない場合は?

    A: 以下を確認してください:

    • 画像パスが正しいか
    • next.config.js で画像ドメインの設定が必要な場合は追加されているか
    • Image コンポーネントに width と height または fill プロパティが設定されているか
  • Q: 背景画像のサイズを調整するには?

    A: className に以下のTailwindクラスを追加して調整できます:

    • object-contain: アスペクト比を保ったまま全体を表示
    • object-cover: アスペクト比を保ったまま領域を覆う
    • object-fill: アスペクト比を無視して領域いっぱいに表示

まとめ

Next.jsで背景画像を設定する際は:

  1. 画像をpublicフォルダに配置
  2. next/imageをインポート
  3. Imageコンポーネントでfillプロパティを使用
  4. 必要に応じてオーバーレイを追加

これらの手順を押さえることで、最適化された背景画像の実装が可能です

Discussion