[CSS] 배경화면 설정하기, background-size: cover?

원본 이미지(아래)를 가지고 배경화면을 설정해보자.

단순히 background: url('image/background-image.jpg'); 와 같이 배경화면을 설정하게 되면 아래와 같이 나온다. 보다시피 많은 부분이 잘려져 나간 것을 확인할 수 있다.

background-size:auto;(기본값)으로 설정하게 되면 "Default value. The background image is displayed in its original size"(W3School) 원래 크기대로 나온다고 써져 있었는데 왜 확대되는 걸까?

이 부분에 관해서는 더 공부를 해봐야겠지만, 내 추측으로는 브라우저에서 배경화면을 설정할 때 (0,0)을 기준으로 사진을 맞춘다. 그런데 원본 이미지의 크기가 6240 x 4160으로 너무 크다보니 사진이 잘려서 표시된 것이다.

여기서 background: url('image/background-image.jpg'); background-size: cover;를 추가하면 아래와 같이 나온다.

또한 화면 사이즈를 조정하게 되면 아래와 같이 이미지가 반복되는 것을 확인할 수 있다.

background-repeat: no-repeat;으로 설정하면 아래와 같은 빈 화면이 나온다.

background-size: contain;으로 설정한 결과이다. contain 속성은 전체 이미지가 보여질 수 있도록 이미지를 조정한다.그런데 왜 아래와 같은 결과가 나오는지 모르겠다. 나중에 해결할 문제로 남겨두겠다.