CSS에서 배경 크기를 사용하는 방법

CSS background-size 속성은 요소의 배경 이미지 크기를 설정합니다. 이미지는 사용 가능한 공간에 맞게 전체 크기로 늘리거나 늘리거나 제한할 수 있습니다.

background-image: url('some-example-image.jpg');

씌우다

background-size: cover;

픽셀 또는 백분율 크기

background-size: 300px;

background-size: 15%;

포함하다

background-size: contain;

백그라운드 반복

컨테이너가 이미지보다 큰 경우 background-repeat 속성이 no-repeat 로 설정되지 않은 경우 이미지가 모자이크 처리됩니다.

background-repeat: no-repeat;

배경 위치

background-position CSS 속성은 각 배경 이미지의 초기 위치를 설정합니다.

background-position: center;

배경색

배경 이미지로 가려지지 않은 공간은 background-color 속성으로 채워지며 투명도가 있는 배경 이미지에 배경색이 보이게 됩니다.

background-color: lightgreen;