react background image 설정하기

react를 사용해서 프로젝트를 진행하던 중에 

이미지를 background에 넣고 싶어서 넣었는데

div 크기만큼 완전 째깐하게 들어갔다,,; 

 

구글링해보니까 

background-size: cover;

background-position: center;

background-repeat: no-repeat;

 

이렇게 설정하면 된다길래 했는데도 안됨,,,🥲

 

그때 찾은정보..!

 

위처럼 저렇게 설정해도 배경에 꽉차게 안들어간다! 싶으면

height: 100vh;

 

이렇게 아래에 추가로 설정해주면 잘된다~

 

height: 100vh    => veiwport 높이의 100%라는 의미

 

 

+ 배경 이미지 넣는방법!

우선, 나같은 경우는 따로 css 파일을 만들어서 사용했다.

이렇게 이미지가 사용되는 폴더 안에 이미지 파일을 넣어주었고

css 파일도 만들어줬고

그 다음에 css 파일에 들어가서 

 

 

 

 

 

 

.background {
  background-image: url(./natureyoga.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}

이렇게 .background라는 className을 정해주었고

background-image: url(./natureyoga.jpg);

 

이미지 삽입은 이렇게 해줬다.

 

그리고 이게 사용될 Home.tsx 컴포넌트로 이동해서

<Box className='background'>

 

이렇게 className에다가 background를 지정해주면 된다.