20221005 CSS background-image 보이게 하기

<div>에 background-image를 사용해서 마치 div 크기만큼의 <img>를 쓴 것처럼 활용하고 싶은데
<div>와 </div>사이에 글이 들어가지 않으면 이미지가 보이지 않고, 보이더라도 글이 들어가는 공간만큼만 자꾸 이미지가 보이게 되었다.

Solution

div 공간 만들기 - padding-bottom

background-image를 적용하려는 div에 스타일로 padding-bottom: 값을 준다.
padding-bottom은 div가 공간을 차지하게 만들어주는 코드이다. 이 값이 없으면 div 사이즈가 0인것이다.

padding-bottom: 60%;

ETC

이미지 채우기 속성 - background-size

background-size: cover

• cover : 이미지를 공간에 꽉 채우는 속성

이미지 위치 설정하기 - background-position

background-position : center center