L'etude
react background image 설정하기
hxunz
2022. 5. 9. 21:27
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를 지정해주면 된다.