background-origin

CSS background-origin 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.

background-attachmentfixed인 경우 background-origin은 무시됩니다.

구문

/* 키워드 값 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* 전역 값 */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

background-origin 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

border-box
배경을 테두리 박스에 상대적으로 배치합니다.
padding-box
배경을 안쪽 여백 박스에 상대적으로 배치합니다.
content-box
배경을 콘텐츠 박스에 상대적으로 배치합니다.

형식 정의

초기값padding-box
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
Computed valueas specified
Animation typediscrete

형식 구문

<box>#

where
<box> = border-box | padding-box | content-box

예제

배경 원점 설정하기

.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
}
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
}
div {
  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-origin' in that specification.
Candidate Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-originChrome Full support 1
Full support 1
No support 1 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge Full support 12Firefox Full support 4
Full support 4
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1 — 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Used the -moz-background-clip: padding | border syntax.
IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.
Opera Full support 10.5
Full support 10.5
No support 15 — 51
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari Full support 3
Full support 3
Full support 3
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Webkit accepts alternate synonyms to its values: padding, border, and content.
WebView Android Full support 4.1
Full support 4.1
No support 4.1 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android Full support 18
Full support 18
No support 18 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android Full support 14
Full support 14
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Opera Android Full support 11
Full support 11
No support 14 — 47
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS Full support 1
Full support 1
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Webkit accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android Full support 1.0
Full support 1.0
No support 1.0 — 9.0
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
content-boxChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
Opera Full support 10.5Safari Full support 3WebView Android Full support 4.1Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기