[NextJS] Image background 설정하기

일반적으로 웹에서는 img tag 혹은 css의 background-image 속성을 사용하여서 배경 이미지를 설정한다. 그러나 Next JS에서는 자체적으로 최적화를 해주는 Image tag가 있다. 따라서 이 태그를 사용해 배경으로 설정해보겠다.

 

import Image from "next/image";

export default function Page() {
  return (
    <div className={styles.container}>
      <Image
        src={"/image/background.png"}
        alt={"background"}
        layout="fill"
        objectFit="cover"
        objectPosition="center"
      />
      <div className={styles.overlay}>
        <p>content</p>
      </div>
    </div>
  )
}

Image tag에서는 width와 height를 설정할 수도 있지만 위처럼 layout을 fill로 설정하고 objectFit을 cover로 설정하면 자동으로 배경을 채워준다. objectPosition 속성은 사용하지 않을 수도 있지만 우선 center로 설정해준다. 이렇게 작성하기만 하면 이미지와 content가 각각 존재할 뿐 배경으로 적용되지는 않는다. 따라서 overlay class에게 배경 이미지 위로 올라오라는 css를 작성해 주어야 한다.

 

.container {
  position: relative;
  height: 100vh;
}

.overlay {
  position: absolute;
}

이렇게 container에는 position을 relative로 주고, overlay에게 position을 absolute로 주면 콘텐츠의 내용이 배경 이미지 위로 올라온다.