background-size

background-size: auto; /* 기본값 - 원래 이미지 크기 그대로 */
background-size: contain; /* 공간이 남더라도 이미지 전체가 보이게 */
background-size: cover; /* 이미지가 잘리더라도 꽉 차게 */
background-size: 100% 50%; /* width, height px도 가능 */

background-clip

요소의 배경이 어디까지 차지할 지를 설정한다.

background-clip: padding-box; /* 기본값 */
background-clip: border-box;
background-clip: content-box;
background-clip: text;

background-origin

background-image의 시작점을 지정한다.
기본값 : padding-box

background-origin: padding-box; /* 기본값 */
background-origin: border-box;
background-origin: content-box;

참고)

.box {
  width: 300px;
  height: 200px;
  border: 10px solid transparent;
  padding: 10px;
  background-image: url('./moon.jpg');
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: 테스트값;
}