6.4.4 background-size 속성
요소의 배경 크기가 이미지보다 크면 background-repeat 속성으로 해결할 수 있지만, 요소의 배경 크기가 이미지보다 작을 때 이미지가 잘려 보이는 문제는 해결할 수 없습니다. 그 대신 이 문제는 background-size 속성으로 이미지 크기를 지정해서 처리할 수 있습니다.
형식
background-size:auto|cover|contain|<너비 높이>;
속성값은 auto, cover, contain을 사용하거나 크기를 직접 지정해도 됩니다.
표 6-13 background-size 속성값
|
속성값 |
설명 |
|
auto |
이미지 크기를 유지합니다. |
|
cover |
이미지의 가로 세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경에 꽉 채웁니다. |
|
contain |
이미지의 가로 세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소합니다. |
|
<너비 높이> |
이미지 크기를 직접 지정합니다. |