[Tailwind CSS] 특정 구역 배경 이미지 + 페이지 전체에 헤더 컴포넌트를 상단 고정시키기

🫧 4.10

( + next.js) 

 

어제 쓴 글에 나온 방법대로 하면 div에 배경이미지는 잘 적용된다. 

 

하지만 내 경우 한 페이지 내에서 배경 이미지를 상단 어느 부분까지만 적용하고, 헤더 컴포넌트의 경우 이를 가져와서 전체에 적용하고 싶었다. (헤더는 스크롤을 내리면서 고정되어있는 상태)

 

 

(1) 문제

❗그런데 그 방법대로 (div  className="bg-...")  하면 나는 전체 페이지에 헤더를 적용시키고 싶은데 그게 안됐다.

즉 문제는, 그 배경이미지가 적용된 div 내에서만 헤더가 뜬다는 것이다.

예를 들어, 스크롤을 내리면서 헤더가 고정되어있는데, 이 고정된 헤더가 저 배경이미지 부분까지만 내려가고 그 아래로도 스크롤을 내리면 헤더가 내려오지않는다. (상단 고정 x)

 

그 div를 벗어나면 헤더는 쓸 수 없다.  (코드를 봐도 당연한 결과..)

그렇다고  Header컴포넌트를 배경이미지 적용된 div 상위에서 쓸 수도 없고.. (=> 그럼 헤더에 배경이미지 적용 X)

배경이미지가 적용된 div 내에만 Header을 임포트해서 써야 배경 이미지 위에서 헤더 컴포넌트가 적용되는 상황.  

<div className="bg-main-img bg-cover ...">
   <DynamicHeader />     // 임포트한 컴포넌트 헤더
</div>
<div ...>
...

위 코드처럼 하고있었더니 해당 상위 div에만 헤더가 적용되니 문제! ㅠㅠ

 

---

 

(2) 해결

그래서 스스로 해결한 방법은 다음과 같다 !

 

✨

div 에 배경 이미지를 주는 것이 아니라,  아예 별도의 이미지 태그를 쓰고 absolute 속성을 주는 식으로 했다.

내 경우 next의 Image태그를 사용했고, absolute 속성을 주고 대신 이 이미지 위에서 쓸 태그 들에는 z-0 속성을 주어 위에 뜨게했다.

또한 넓이가 w-full 이나 w-[100%]  특정 px 을 줘도 배경 전체에 채워지지않는 문제가 있었는데,

min-w-..  최소 넓이를 줌으로써 해결되었다.

 

이렇게하면 해당 배경이미지 위에서 import한 헤더 컴포넌트나, z-0 속성을 준 태그들이 잘 뜨고,

특정 div 구역 내가 아닌, 전체페이지에도 헤더 컴포넌트가 적용된다! 

//page.tsx


import mainImg from "/app/_assets/image/mainpage/main.png";

..

    <div className="min-w-[1920px]">
      <div className="flex flex-col">
        <DynamicHeader />  // 임포트한 헤더 컴포넌트 
        <Image
          src={mainImg}  // 여기에 배경이미지 
          alt="main-image"
          className="absolute min-w-[1920px] h-[2550px] brightness-[90%]"
          //  그냥 w-full, w-[100%], w-[1920px] 안됨. 반드시 min-w로 줘야 채워짐
        />
        <section className="z-0 flex flex-col w-full h-[500px] justify-center items-center mt-[200px] text-white">
          {/* z-0 필수 */}

...

 

 

 

이제 아래와 같이, 해당 이미지 아래로 스크롤을 내려도 헤더가 상단에 잘 고정되어 있는 것을 확인할 수 있다.

(아래 사진으로는 분간이 잘 안될 수 있지만 .. ㅎㅎ 😅)