tailwindcss,reactで画像を背景として使用するための方法

はじめに

どうも！フリーエンジニアKeiです
探してもなかなか使いたい内容が見つけられなかったのでまとめました。

問題

react+tailwindcssの環境で
背景（セクションごと）として画像を使いたいときの設定方法

解決方法

①tailwind.config.jsに追記
②App.jsxに追記

①tailwind.config.jsに追記

extend{}の中にbackgroundImage{}を追記する
・Bg1は関係者が分かりやすい名称
・url('中は参照したい画像のリンク ')
・my-img-nameは参照する画像の名称
今回はsrcにimg(ディレクトリ)を作成して、ディレクトリ内に画像を入れています。

tailwind.config.js

theme: {
    extend: {
      backgroundImage: {
        Bg1: "url('../src/img/my-img-name.jpg')",
      },
    },
  },

②App.jsxに追記

挿入したいセクションに
<div className=>bg-[url('../src/img/my-img-name.jpg')]</div>を追記する
あとはcssで好きなようにいじってください。

App.jsx

        <section id="#">
          <div className="bg-[url('../src/img/cat1.jpg')] min-h-screen bg-cover bg-center object-cover opacity-70">
            <div>
          </div>
        </section>

おわりに

基礎だからか意外と探しても出てこないので簡単にまとめました。