기본적으로 배경 이미지는 이미지의 (실제)너비와 높이 및 자연스러운 가로/세로 비율을 유지하면서, 이미지의 좌상단으로부터 시작하여 박스를 다 덮을 때까지 채워진다. background-size 속성값에는 배경 이미지의 실제 크기를 변경할 수 있는 가로 세로 크기값(단위는 px이나 %)을 사용할 수 있는데, 기본값인 auto는 이미지의 자연스러운 가로/세로 비율을 유지하면서 필요에 따라 크기가 조정된다:

background-image: url("images/목없는부처님-small.jpg");

        
            .background-sizing_box-small {
                width: 600px; height: 300px;
                background: url('images/목없는부처님-small.jpg'); /* 더 작은 이미지: 200 x 242 */
            }
        
    

background-image: url("images/목없는부처님.jpg");

        
            .background-sizing_box {
                width: 800px; height: 400px;
                background: url('images/목없는부처님.jpg'); /* 더 큰 이미지: 600 x 725 */
            }
        
    

1. background-size: cover;는 좌상단에서 시작하여 배경 이미지로 박스를 모두 덮는다. 이미지가 더 작은 경우 비율에 따라 확대되면서 선명도를 해칠 수 있고, 이미지가 더 큰 경우 박스 영역을 채운 뒤 비율에 따라 이미지의 나머지 부분은 잘리게 된다:

2. background-size: contain;은 이미지를 늘리거나 자르지 않으면서 좌상단부터 시작하여 이미지의(너비나 높이 중 어느 한쪽이 박스 크기에 딱 맞도록 하여) 가로세로 비율에 따라 채워준다: