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;
이미지의 너비와 높이 비율은 유지됨.
요소의 너비나 높이 중에 큰값에 배경을 맞춤.
(화면을 꽉 채우고 싶을때 사용 / 이미지의 일부는 잘려서 안보일수 있음)
