[CSS] background 잘림 현상 해결

PROBLEM

뷰포트 크기를 줄여 스크롤이 생기면 일부분 배경 색상이 잘려 나오지 않는 현상이 있었다.

이미지와 로그인 버튼을 감싸는 div에 h-full로 해두었다. (h-full  -> height: 100%) 여기서 h-screen(height: 100vh)으로 바꾸어도 결과는 그대로였는데, 아마도 뷰포트 크기를 바꾸었을 때 바로바로 적용이 되지 않는 것이 문제였다. 

문제의 이전 화면은 아래와 같았다.

BEFORE

스크롤이 나타나지 않았을 때

스크롤이 생겼을 때

 

import GoogleSignInButton from '@/components/pc/GoogleSignInButton';
import IllustSignIn from '@/img/Illust_signIn.png';
import Image from 'next/image';

export default function Signin() {
  return (
    <>
      <div className="absolute top-0 left-0 bg-main_bg h-full">
        <Image src={IllustSignIn} alt="signin" />
        <div className="mt-[50px] flex justify-center">
          <GoogleSignInButton></GoogleSignInButton>
        </div>
      </div>
    </>
  );
}

 

AFTER

스크롤이 나타나지 않았을 때

 

스크롤이 생겼을 때

 

선택한 방법은 전체를 한 번 더 감싸주고 background 속성을 추가해주는 것이다.

background-attatchment는 fixed로 해 고정해주고, background-size는 cover로 해 모두 덮어줬다.

이미지와 버튼을 감싼 div에 백그라운드 컬러를 해두어도 이미지와 버튼 사이에 보이는 백그라운드 색상이 없었다😂

추가로, 가로 스크롤이 생기면 우측 스크롤이 생기면서 여백이 생겨 그 여백 부분에 Image가 채워지는 게 아닌, 노란 배경이 나와서 globals.css에서 body에 가로 스크롤은 없앴다.

 

어차피 서비스에서 가로 스크롤이 필요한 부분이 없기도 해서, 일단 없애두었다. 

나중에 모바일 뷰도 수정작업이 필요해 기록하긴 할거지만, 가로 폭이 일정 크기보다 작아지면 모바일뷰로 넘어가게 해두어서 가로 스크롤이 필요가 없다..!

import Image from 'next/image';
import IllustSignIn from '/public/images/Illust_signIn.png';
import ButtonXL from '@/components/buttons/ButtonXL';

export default function Signin() {
  return (
    <div className="w-screen h-screen bg-cover bg-fixed bg-background">
      <div className="absolute bg-background">
        <Image src={IllustSignIn} alt="signin" />
        <div className="mt-[50px] mb-[40px] flex justify-center bg-background">
          <ButtonXL>구글로 로그인하기</ButtonXL>
        </div>
      </div>
    </div>
  );
}

 

완성✨