方法1: bg
クラスを使用する方法
<div class="bg-[url('画像のURL')]">
<!-- 内容 -->
</div>
方法2: bg-[url]
ユーティリティを使用する方法
<div class="bg-[url('画像のURL')]">
<!-- 内容 -->
</div>
方法3: カスタムクラスを作成する方法
<style>
.custom-bg {
background-image: url('画像のURL');
}
</style>
<div class="custom-bg">
<!-- 内容 -->
</div>
上記の方法では、画像のURL
の部分に、使用したい背景画像のURLを指定します。例えば、実際の画像のURLは https://example.com/image.jpg
の場合、以下のようになります。
<div class="bg-[url('https://example.com/image.jpg')]">
<!-- 内容 -->
</div>
これらの方法を使えば、Tailwind CSSで背景画像を簡単に設定することができます。詳細な設定や背景画像のサイズや位置の調整などは、Tailwind CSSのドキュメントを参照してください。