[CSS] 배경 이미지 크기 조정하기 > 기술자료

• 목록

. 큰 이미지를 작게해서 반복하기
. 이미지 늘이기
. 작은 이미지를 크게하기
. 특별한 값: "contain"과 "cover"

CSS 이미지 비율유지, 최대크기로 cover
CSS 이미지 비율유지, 최대크기로 crop

/* Keywords syntax */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height set to 'auto') */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds values by background-image */
/* Do not confuse this with background-size: auto auto */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;


참고자료
https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images
https://developer.mozilla.org/ko/docs/Web/CSS/background-size
http://zetawiki.com/wiki/CSS_이미지_object-fit_cover