background-origin 속성 사용법

background-origin 속성은
요소 박스의 배경 이미지를 어느 영역을 기준으로 포지셔닝할지 설정합니다.
이 속성은 세 가지 옵션으로 padding-box, border-box, content-box 중 하나를 선택하여 배경 이미지 포지셔닝의 기준(origin, 시작점) 영역으로 지정합니다.

데모 HTML 
<div></div>
CSS aspect-ratio 속성: 요소의 가로 세로 비율 설정
데모 CSS 
div {
    aspect-ratio: 1.5;
    padding: 30px;
    border: 10px dashed yellowgreen;
    background-color: #f2f2f2;
    background-image: url("earth.jpg");
    background-repeat: no-repeat;
    background-size: 70px auto;
    background-position: left top;
    background-origin: padding-box; /* 초깃값 */
}
데모 적용해 보기: background-origin 데모 버튼을 클릭해 보세요!

참고하세요!
요소의 배경(색상이나 이미지)은 항상 border 뒤에 그려집니다.

값

background-origin 속성의 값
border-box 요소 박스의 border-box를 포지셔닝의 기준 영역으로 지정합니다.
padding-box 초깃값임.
요소 박스의 padding-box를 포지셔닝의 기준 영역으로 지정합니다.
content-box 요소 박스의 content-box를 포지셔닝의 기준 영역으로 지정합니다.

background-origin 속성의 값에 대한 용어 설명은 다음과 같습니다.

  • border-box: border의 가장자리까지의 영역을 의미합니다.
  • padding-box: padding의 가장자리까지의 영역을 의미합니다.
  • content-box: 요소의 실제 내용이 위치하는 영역입니다. 글자, 이미지, 동영상 등이 여기에 포함됩니다. 이러한 콘텐츠 가장자리까지의 영역을 의미합니다.

이 용어들은 요소 박스의 Box model을 통해 확인할 수 있습니다.

box model
요소 박스의 Box model

CSS의 Box model은 웹 페이지에서 요소의 구조와 레이아웃을 정의하는 개념입니다. 각 HTML 요소는 content(내용), padding(패딩), border(테두리), margin(마진)으로 구성되어 있습니다. 이러한 구성 요소들이 상자 모양을 이루어서 "Box model"이라고 불립니다.

형식 구문

CSS 
selector {
    background-origin: [ border-box | padding-box | content-box ] || Global values
    /*
        Global values:
        inherit | initial | revert | revert-layer | unset
    */
}

형식 정의

background-origin 속성의 형식 정의
초깃값 padding-box
적용 요소 모든 요소
상속 아니오

예제 - 두 개의 그라디언트 사용하기

이 예제에서는 .box에 두꺼운 점선 테두리가 있습니다. 첫 번째 그라디언트는 padding-box를 배경 원점으로 사용하므로 배경은 테두리 안에 위치합니다. 두 번째는 content-box를 사용하므로 콘텐츠 영역에만 표시됩니다.

CSS에서 그라디언트 구현은 background-image 속성을 사용합니다. 따라서, background-origin 속성을 적용할 수 있습니다.

HTML 
<div class="box">코딩에브리바디</div>
HTML <div> 태그 사용 방법
CSS 
.box {
    color: #fff;
    background-image: linear-gradient(
                        to right,
                        rgba(255, 0, 0, 0.5),
                        rgba(0, 0, 255, 0.5),
                        rgba(0, 128, 0, 0.5)
                      ),
                      radial-gradient(circle, gold, silver);
    border: 15px dashed yellowgreen;
    padding: 15px;
    background-origin: padding-box, content-box;
    background-repeat: no-repeat;
}
실제 적용 모습

브라우저 호환성

background-origin 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background-origin 1 12 4 3

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

background-origin 속성의 명세서 사양
명세서 사양
background-origin CSS Backgrounds and Borders Module Level 3
#the-background-origin

참고문헌

같이 보기