CSS

Tailwind CSSでbackground-imageを設定する方法

本サイトの記事内にアフィリエイト広告が含まれる場合があります。

Tailwind CSSでbackground-imageを設定する方法のサムネイル画像

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

TailwindCSSを使っている時に、background-image を使いたいけど、指定方法に迷った経験があったので、この記事を書いてます。

結論から言うと、Tailwindのユーティリティクラスとしてバックグラウンドイメージを扱うことが可能になります。

この記事ではその方法について解説します。

著:工藤 智祥
¥3,665 (2024/10/08 11:55時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場

tailwind.config.jsにバックグラウンドイメージを設定する

tailwind.config.jsに以下のように設定することで、クラス名を使用してバックグラウンドイメージを設定できます。

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'custom-image': "url('/images/custom.webp')"
      }
    }
  }
}

url()の中身は、ご自身のプロジェクトのパスを設定ください。

HTMLの書き方

bg-[tailwind.config.jsで設定したプロパティ名]background-image を指定することができるようになります。

<div class="bg-custom-image bg-contain bg-left-top bg-no-repeat w-full min-h-min h-full block">
</div>

まとめ Tailwind CSSでbackground-imageを設定する方法

結構簡単にできました。

これを使うと、Breakpoint prefix を使ってレスポンシブもめっちゃやりやすいと思いました。

著:工藤 智祥
¥3,665 (2024/10/08 11:55時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
  • この記事を書いた人

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

-CSS
-