[ HTML / CSS ] background-size 속성 (auto, contain, cover)

 

backgrund-size 속성은 backgound-img 속성으로 지정한 이미지의 크기를 조절 할 수 있는 속성이다. 

사용자 지정 값으로 설정 할수도 있고 키워드 값을 사용하면 편하게 설정할 수 있다. 

 

 

div 의 크키를 800px의 정사각형으로 만들고, 배경사진을 불러온 상태에서 backgound-size 속성을 키워드로 설정해보자. 

설정한 원본이미지는 다음과 같다. 

 

---

auto (기본값)

" 문서상으론 고유한 비율이 유지되도록 해당 방향으로 배경 이미지의 크기를 조정합니다. "

라고 되어있다. 이미지 자체에는 리사이징이 되어있지 않지만 컨테이너 크기에 맞게 조정되었다. 

 

contain

이미지를 자르지 않고, 부모의 크기 안에서 최대한 커진다. 

backgound-repeat 속성의 디폴트가 반복 이기 때문에 옆으로 반복되는 이미지를 확인할 수 있다. 

 

 

cover

컨테이너 크기에 꽉 맞도록 이미지의 가장자리가 잘린다. (보기좋다.) 

 

참고

background-size - CSS: Cascading Style Sheets | MDN

 

 

 

이상 backgound-size 속성의 키워드 값에 대한 결과를 알아봤다.