CSS background-origin 속성 – 배경 이미지의 포지셔닝 기준 영역 설정

`background-origin` 속성 사용법

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

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; /* 초깃값 */
}

참고하세요!
요소의 배경(색상이나 이미지)은 항상 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을 통해 확인할 수 있습니다.

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> 태그 사용 방법

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;
}