backgrund-size 속성은 backgound-img 속성으로 지정한 이미지의 크기를 조절 할 수 있는 속성이다.
사용자 지정 값으로 설정 할수도 있고 키워드 값을 사용하면 편하게 설정할 수 있다.
div 의 크키를 800px의 정사각형으로 만들고, 배경사진을 불러온 상태에서 backgound-size 속성을 키워드로 설정해보자.
설정한 원본이미지는 다음과 같다.
auto (기본값)
" 문서상으론 고유한 비율이 유지되도록 해당 방향으로 배경 이미지의 크기를 조정합니다. "
라고 되어있다. 이미지 자체에는 리사이징이 되어있지 않지만 컨테이너 크기에 맞게 조정되었다.
contain
이미지를 자르지 않고, 부모의 크기 안에서 최대한 커진다.
backgound-repeat 속성의 디폴트가 반복 이기 때문에 옆으로 반복되는 이미지를 확인할 수 있다.
cover
컨테이너 크기에 꽉 맞도록 이미지의 가장자리가 잘린다. (보기좋다.)
참고
background-size - CSS: Cascading Style Sheets | MDN
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
developer.mozilla.org
이상 backgound-size 속성의 키워드 값에 대한 결과를 알아봤다.
'취미' 카테고리의 다른 글
| [ HTML / CSS ] z-index, stacking context (0) | 2023.12.14 |
|---|---|
| [ HTML / CSS ] 공용키워드 inherit, initial, unset (0) | 2023.12.12 |
| [ HTML / CSS ] 인라인 요소 & 블록 요소 (0) | 2023.12.08 |
| 프린터 / 프로그래머스 코딩테스트 자바스크립트 코드 (0) | 2023.02.27 |
| 주자 요금 계산 / 프로그래머스 코딩테스트 자바스크립트 코드 (0) | 2023.01.12 |