background-size 속성

background-size: auto;

 

원래 이미지 사이즈대로 사용됨.

박스에 크기를 주더라도 원래 이미지 사이즈대로 나타남.

 

background-size: 500px;

 

값이 하나만 있을경우 width 값으로 인식됨. height는 비율에 맞추어 auto로 나타남.

 

background-size: 500px 300px;

 

지정한 값대로 width는 500픽셀, height는 300픽셀로 나타남.

 

background-size: 50% auto;

 

박스값의 50%의 너비로 지정됨. 높이는 auto로 나타남.

 

background-size: 100%;

 

이미지의 너비와 높이비율을 박스 크기에 따라 100%로 맞춰줌

 

background-size: contain;

 

이미지의 너비와 높이 비율은 유지됨.

요소의 너비나 높이 중에 작은값에 이미지를 맞춤.

(이미지는 잘려보이지 않지만  공백이 보일수 있음)

 

background-size: cover;

 

이미지의 너비와 높이 비율은 유지됨.

요소의 너비나 높이 중에 큰값에 배경을 맞춤.

(화면을 꽉 채우고 싶을때 사용 / 이미지의 일부는 잘려서 안보일수 있음)