속성 background-origin

속성 background-origin는 배경 이미지(즉, 이미지, 채우기 아님)가 요소에 대해 어떻게 배치될지를 설정합니다: 배경 이미지의 일부가 테두리 아래로 들어갈지, 배경이 테두리 아래로 들어가지 않을지 또는 배경이 요소의 내용 영역에만 배치될지(즉, padding이 배경을 밀어낼 것입니다).

구문

선택자 {
	background-origin: padding-box | border-box | content-box;
}

값

값	설명
`border-box`	배경 이미지가 테두리 아래로 들어갑니다.
`padding-box`	배경 이미지가 테두리 아래로 들어가지 않습니다.
`content-box`	배경 이미지가 내용 위에만 배치됩니다.

기본값: padding-box.

참고사항

속성 background-origin는 background-attachment의 값이 fixed일 때 작동하지 않습니다. 또한 background-repeat의 값이 repeat일 때 속성 background-origin는 항상 값 border-box일 때처럼 작동합니다.

예제 . 기본값

기본적으로 배경은 테두리 아래로 들어가지 않습니다:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

예제 . 값 border-box

이제 배경이 테두리 아래로 들어갑니다:

<div id="elem"></div>

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

예제 . 값 content-box

이제 배경이 padding에 의해 밀려납니다:

<div id="elem"></div>

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

예제 . background-repeat: repeat일 때

background-repeat의 값이 repeat일 때 속성 background-origin는 항상 값 border-box일 때처럼 작동합니다, 즉 배경이 항상 테두리 아래로 들어갑니다:

<div id="elem"></div>

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

함께 보기

속성 background-clip,
배경 이미지와 채우기의 위치를 모두 설정합니다
속성 background,
배경을 위한 단축 속성입니다