[Tailwind CSS] div에 배경 이미지 적용하기 (tailwind config.js 활용)

 

😊 4.9 (+ next.js)

 

next.js 프로젝트를 진행하면서 tailwind css를 활용 중이다

와이어프레임 디자인에 따라, 헤더는 투명하게 우선 두고 그 뒤에 배경 이미지가 전체적으로 적용이 되어야했다

이를 위해 여러 방법을 시도해보다가 아래의 (3) 방법으로 해결 ! 

 

(하지만 -다음 글에서 또 쓰겠지만 ..   배경이미지를 두고 헤더를 페이지 전체에 적용하려면 (배경이미지 구역에만 적용하는것이 아닌), 아래의 방법이 아니라 Image (next제공) 태그를 별도로 써야했다 ! 😅)

 

---

(1)  시도 :  bg-[url('경로')]  

div 에 배경 이미지를 적용하고 싶어 알아봤는데, 

bg-[url('/app/_assets/image/mainpage/main.png')]

위와 같이

 bg-[url('경로')] 라는  className 속성을 주면 된다고 봐서 적용해보았다. 

 

ex.   <div className="flex flex-col min-h-[2600px] w-screen h-screen bg-[url('/app/_assets/image/mainpage/main.png')] bg-cover">

 

하지만 되지않았다 .. ㅠㅠ

 

 

 

(2) 시도 : style={{ ... }}

다른 블로그 글을 보니 위와 같은 방식은 React 에선 먹히지 않는다는 내용이 있었다. 

그래서 React 에서 tawilind css 를 통해 배경이미지 적용하는 법을 보고  아래와 같이 해보았다.

근데 이경우 className에 tailwind css를 적용하는게 아니라 인라인 스타일링을 한 것인듯!

<div
      className="..."
      style={{
        backgroundImage: `url(${이미지경로변수})`,
      }}
    >
</div>

 

그러나 이 방법도 통하지않았다 ... (그냥 React 프로젝트가 아니라 next.js라 그런가,..) 

 

 

 

---

 

(3) 해결 : tailwind config.js 활용

그러다가, 역시 stackoverflow..  ㅠㅠ 여기서 또 해결되었음!

https://stackoverflow.com/questions/63658218/tailwind-cs-backgroundimage-doesnt-work-for-me

Tailwind CS backgroundImage doesn't work for me

이 글을 보고 아래의 댓글을 통해 해결되었다 !

 

 

즉, tailwindcss.config.js 에서

theme 안에 위와 같이, 배경이미지 변수명을 써주고 "url('경로')" 를 입력해서 넣어주고,

이 변수명을 className에서 쓰는 것이다 !!

 

✨

그런데 이때 아주아주 주의할 게 있다 !! 위의 댓글 이미지에서도 나와있지만...

내 경우 next.js 프로젝트였는데, src 폴더가 없고 app폴더가 가장 상위 root에 위치해있다.

하지만 정말 특이하게도 app 폴더부터 경로를 써줄 때, /app  이나  ./app 으로 경로를 쓰면 안되고,

../app 이라고 경로를 써줘야한다 !  (..을 붙여줘야)

(똑같은 이미지 파일을 가져와서 next Image 태그를 쓸 때에는 /app/... 이런 식으로 경로를 써줬는데 말이다 ... -_-)

 

 

---

아래는 내가 설정한 내용!

// tailwind.config.js

 theme: {
    extend: {
      colors: {
			....
        },
      },
    },
    darkMode: "class",
    backgroundImage: {
      "main-img": "url('../app/_assets/image/mainpage/main.png')",
    },
  },

 

그리고 이 배경 이미지를 쓸 태그에다가 className 을 bg-내가지정한변수명    을 써주면 된다. 

그리고 bg-cover 등 속성도 같이 부여해주면 끝 !

 

 

내 코드

 <div className="flex flex-col h-[2530px] bg-cover bg-main-img  bg-blend-darken bg-black bg-opacity-10">

 

참고로 여기서 bg-blend-darken  bg-black  bg-opacity-..   세 속성을 한꺼번에 써주면 배경 이미지에만 (위 내용말고) opacity를 주고 어둡기 등을 조절할 수 있다.