기본적으로 배경 이미지는 이미지의 (실제)너비와 높이 및 자연스러운 가로세로 비율을 유지하면서, 이미지의 좌상단으로부터 시작하여 박스를 다 덮을 때까지 채워지는데, background-origin: border-box/padding-box/content-box; 속성(기본값: padding-box)은 해당 박스와 연결된 배경 영역(의 시작 지점)을 설정해준다:

[background-origin: border-box;]

기본적으로 배경 이미지는 이미지의 (실제)너비와 높이 및 자연스러운 가로세로 비율을 유지하면서, 이미지의 좌상단으로부터 시작하여 박스를 다 덮을 때까지 채워지는데, background-origin: border-box/padding-box/content-box; 속성(기본값: padding-box)은 해당 박스와 연결된 배경 영역(의 시작 지점)을 설정해준다

[background-origin: padding-box; (기본값)]

기본적으로 배경 이미지는 이미지의 (실제)너비와 높이 및 자연스러운 가로세로 비율을 유지하면서, 이미지의 좌상단으로부터 시작하여 박스를 다 덮을 때까지 채워지는데, background-origin: border-box/padding-box/content-box; 속성(기본값: padding-box)은 해당 박스와 연결된 배경 영역(의 시작 지점)을 설정해준다

[background-origin: content-box;]

기본적으로 배경 이미지는 이미지의 (실제)너비와 높이 및 자연스러운 가로세로 비율을 유지하면서, 이미지의 좌상단으로부터 시작하여 박스를 다 덮을 때까지 채워지는데, background-origin: border-box/padding-box/content-box; 속성(기본값: padding-box)은 해당 박스와 연결된 배경 영역(의 시작 지점)을 설정해준다

* cf 1) 위와 같이 background-origin: 속성으로 배경 이미지 표시 영역을 설정해줄 수 있지만(이는 모두 background-clip: 속성이 기본값인 border-box로 주어져 있는 상태에서이다!), 그보다 먼저 background-clip: border-box/padding-box/content-box; 속성에 다른 값이 주어지면; 맨 밑의 배경 렌더링 영역이 우선적으로 클리핑된다는 사실을 알아둘 필요가 있다:

[background-clip: border-box; (기본값)]

위와 같이 background-origin: 속성으로 배경 이미지 표시 영역을 설정해줄 수 있지만(이는 모두 background-clip: 속성이 기본값인 border-box로 주어져 있는 상태에서이다!), 그보다 먼저 background-clip: 속성에 다른 값이 주어지면; 맨 밑의 배경 렌더링 영역이 우선적으로 클리핑된다는 사실을 알아둘 필요가 있다

[background-clip: padding-box;]

위와 같이 background-origin: 속성으로 배경 이미지 표시 영역을 설정해줄 수 있지만(이는 모두 background-clip: 속성이 기본값인 border-box로 주어져 있는 상태에서이다!), 그보다 먼저 background-clip: 속성에 다른 값이 주어지면; 맨 밑의 배경 렌더링 영역이 우선적으로 클리핑된다는 사실을 알아둘 필요가 있다

[background-clip: content-box;]

위와 같이 background-origin: 속성으로 배경 이미지 표시 영역을 설정해줄 수 있지만(이는 모두 background-clip: 속성이 기본값인 border-box로 주어져 있는 상태에서이다!), 그보다 먼저 background-clip: 속성에 다른 값이 주어지면; 맨 밑의 배경 렌더링 영역이 우선적으로 클리핑된다는 사실을 알아둘 필요가 있다

* cf 2) 이제, background-origin: border-box; 상태에서(역시, 기본값 아님!) background-clip 값을 바꾸어봅니다:

[background-clip: border-box; (기본값)]

위와 같이 background-origin: 속성으로 배경 이미지 표시 영역을 설정해줄 수 있지만(이는 모두 background-clip: 속성이 기본값인 border-box로 주어져 있는 상태에서이다!), 그보다 먼저 background-clip: 속성에 다른 값이 주어지면; 맨 밑의 배경 렌더링 영역이 우선적으로 클리핑된다는 사실을 알아둘 필요가 있다

[background-clip: padding-box;]

위와 같이 background-origin: 속성으로 배경 이미지 표시 영역을 설정해줄 수 있지만(이는 모두 background-clip: 속성이 기본값인 border-box로 주어져 있는 상태에서이다!), 그보다 먼저 background-clip: 속성에 다른 값이 주어지면; 맨 밑의 배경 렌더링 영역이 우선적으로 클리핑된다는 사실을 알아둘 필요가 있다

[background-clip: content-box;]

위와 같이 background-origin: 속성으로 배경 이미지 표시 영역을 설정해줄 수 있지만(이는 모두 background-clip: 속성이 기본값인 border-box로 주어져 있는 상태에서이다!), 그보다 먼저 background-clip: 속성에 다른 값이 주어지면; 맨 밑의 배경 렌더링 영역이 우선적으로 클리핑된다는 사실을 알아둘 필요가 있다

➥ 이는 모두 background-origin: content-box/border-box; 상태에서(기본값 아님!) background-clip 값을 바꾸어준 것입니다 ← 음~ 좀 혼란스럽군요 ㅡㅡ;