CSS background-size 속성

 

 

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

기본형) backgrund-size :  auto; | contain | cover | <크기 값> | <백분율>

 

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

 

background-position 속성 - 배경 이미지 위치 조절하기

background-position : <수평 위치> <수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>