[Next.js] Image 컴포넌트로 배경 처리하기

오늘은 Image 컴포넌트를 이용해 배경 처리를 하는 방법을 알아보겠습니다. 

 

Next의 Image 컴포넌트를 사용하지 않고 css의 background-image 속성을 사용해 배경 처리를 해줄 수도 있지만 이럴 경우 resizing을 별도로 처리해줘야 하기 때문에 이미지 최적화를 자체적으로 지원하는 Image 컴포넌트를 사용해서 배경 처리를 해주도록 하겠습니다.

 

Image 컴포넌트에 관한 포스트를 아직 읽지 않았다면 아래 링크를 참고해주세요.

 

[NEXT.js] 넥스트 JS를 배워보자 3편 - 최적화된 이미지 컴포넌트

 

---

배경 처리하기

 

일단 layout의 값을 fill로 설정해주면서 이미지가 부모 요소의 크기만큼 늘어날수 있도록 해줍시다.

 

When fill, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.

* fill로 설정하면 부모요소의 position이 relative일 때 이미지가 부모 요소만큼 늘어나도록 설정됩니다

 

배경 이미지가 비율을 유지하면서 늘어날수 있도록 objectFit을 cover, 그리고 이미지 위치가 중앙에 가도록 objectPosition을 center로 지정해두록 합시다.

 

Home.jsx

 import Image from "next/image";
 import styles from "styles/pages/Home.module.scss";
 
 const Home = () => {
    return <div className={styles.background}>
        <Image
          src="/image/main.png"
          alt="메인 배경 이미지"
          layout="fill"
          objectFit="cover"
          objectPosition="center"
        />
    </div>
}

export default Home;

 

이후에는 공식문서에 언급했듯이 이미지 컴포넌트를 감싸고 있는 부모요소에 position을 relative로 지정해줍시다. 

 

Home.module.scss (모듈 css)

.background {
    position: relative;
    min-height: 350px;
  }

---

이로써 배경처리는 끝났습니다.

이후에 배경 위에 그러데이션이라던지 텍스트를 위치하고 싶다면 아래와 같이 position과 z-index를 적절히 사용해서 css를 적용시키면 됩니다.

 

Home.jsx

import Image from "next/image";
import styles from "styles/pages/Home.module.scss";

const Home = () => {
  return (
    <div className={styles.background}>
      <div className={styles.overlay}>
        <h2>코딩 마차</h2>
        <h3>이미지 컴포넌트로 배경처리하기</h3>
      </div>
      <Image
        src="/image/main.png"
        alt="메인 배경 이미지"
        layout="fill"
        objectFit="cover"
        objectPosition="center"
      />
    </div>
  );
};

export default Home;

 

Home.module.scss

.background {
    position: relative;
    height: 350px;
    .overlay {
      z-index: 1;
      position: absolute;
      height: 100%;
      width: 100%;
      background: linear-gradient(
        to bottom,
        rgb(101 100 100 / 34%),
        rgba(0, 0, 0, 0.87)
      );
      .text {
        position: absolute;
        text-align: center;
        z-index: 1;
        top: 100px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 320px;
        color: #fff;
        h1 {
          font-size: 30px;
        }
        h2 {
          margin: 30px 0;
          font-size: 16px;
          padding: 0 50px;
        }
      }
    }

 

결과