Tailwind CSS에서 image 배경을 지정하는 방법 3가지

Tailwind CSS에서 PNG 같은 이미지를 배경으로 지정하는 방법은 크게 보면 다음 3가지

1. bg-[url('/path/to/image.png')]

Arbitrary value 기능을 이용해 클래스에서 직접 배경 이미지 URL을 지정하는 방법

<div class="bg-[url('/images/bg.png')] bg-cover bg-center"></div>

✅ 정적 URL에 적합
⚠️ 동적 URL에는 불리함
🚫 빌드 타임에 Tailwind가 인식하지 못하면 CSS가 생성되지 않음

2. style 속성 (인라인 스타일)

<div
  className="bg-cover bg-center"
  style={{ backgroundImage: `url(${imageUrl})` }}
</div>

✅ 동적 URL에 적합 (props나 API에서 받는 이미지 등)
⚠️ Tailwind의 purge 시스템과 별개
🚫 클래스 스타일만으로 일관성 있게 유지하고 싶은 경우는 부적합

3. custom class 또는 @layer utilities 이용 (tailwind.config.js)

Tailwind의 @layer 기능을 활용하여 커스텀 유틸리티 클래스를 직접 정의할 수도 있습니다.

/* styles.css 또는 globals.css */
@layer utilities {
  .bg-banner {
    background-image: url('/images/banner.png');
    background-size: cover;
    background-position: center;
  }
}

<div class="bg-banner"></div>

✅ 자주 쓰는 배경 이미지를 재사용 가능
✅ Tailwind 클래스처럼 쓸 수 있음
⚠️ config나 global CSS 관리 필요

https://tailwindcss.com/docs/background-image
위 링크는 tailwind 공식문서 링크입니다.