(css) background-size 속성

배경 이미지 크기 조절하기

배경 이미지를 여러 크기로 조절할 수 있음

background-size: auto | contain | cover | <크기 값> | <백분율>

속성 값	설명
auto	원래 배경이미지 크기만큼 표시(초기값)
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소
<크기 값>	너비 값과 높이 값을 지정. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 비율을 자동으로 계산해 높이 값을 지정
<백분율>	배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고, 그 크기에 맞도록 배경 이미지를 확대하거나 축소

ex)

background-size: auto;

background-size: 200px 150px;

background-size: 60% 40%;

background-size: contain;

background-size: cover;

background-size: 100% 100%

출처 - Doit! html5+css3 웹표준의 정석