background-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

시도해보기

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

구문

css
/* 키워드 값 */
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
계산 값as specified
Animation typea repeatable list

형식 구문

background-origin = 
<visual-box>#

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

예제

배경 원점 설정하기

css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
css
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
CSS Backgrounds and Borders Module Level 3
# the-background-origin

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-origin
border-box
content-box
padding-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기