- slide 1 of 23, currently active
- slide 2 of 23
- slide 3 of 23
- slide 4 of 23
- slide 5 of 23
- slide 6 of 23
- slide 7 of 23
- slide 8 of 23
- slide 9 of 23
- slide 10 of 23
- slide 11 of 23
- slide 12 of 23
- slide 13 of 23
- slide 14 of 23
- slide 15 of 23
- slide 16 of 23
- slide 17 of 23
- slide 18 of 23
- slide 19 of 23
- slide 20 of 23
- slide 21 of 23
- slide 22 of 23
- slide 23 of 23
6.4.4 background-size 속성
요소의 배경 크기가 이미지보다 크면 background-repeat 속성으로 해결할 수 있지만, 요소의 배경 크기가 이미지보다 작을 때 이미지가 잘려 보이는 문제는 해결할 수 없습니다. 그 대신 이 문제는 background-size 속성으로 이미지 크기를 지정해서 처리할 수 있습니다.
형식
background-size:auto|cover|contain|<너비 높이>;
속성값은 auto, cover, contain을 사용하거나 크기를 직접 지정해도 됩니다.
표 6-13 background-size 속성값
|
속성값 |
설명 |
|
auto |
이미지 크기를 유지합니다. |
|
cover |
이미지의 가로 세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경에 꽉 채웁니다. |
|
contain |
이미지의 가로 세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소합니다. |
|
<너비 높이> |
이미지 크기를 직접 지정합니다. |