background-origin

background-origin

background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.

---

background-origin

background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.

특징	설명
기본 값	background-origin : padding-box
적용	background
버전	CSS1
사용성	★☆☆☆☆

정의(Definition)

• background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
• background-origin 기준점은 보더(border), 패딩(padding), 컨텐츠(content)에 설정할 수 있습니다.

비교(Compare)

• background-origin 속성은 백그라운드 이미지의 위치 기준점을 통해 설정되며, 이미지가 그대로 유지됩니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 통해 설정되며, 이미지가 편집됩니다.
• background-attachment가 fixed인 경우 background-origin은 무시됩니다.

백그라운드와 관련된 속성(Background Related Properties)

• background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-color 속성은 백그라운드 색을 설정합니다.
• background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
• background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.

문법(Syntax)

background-origin : padding-box | border-box | content-box

/* 기본 속성 */
background-origin : padding-box; 
background-origin : border-box;
background-origin : content-box;

속성(Property)

속성값	설명
padding-box	배경 이미지의 위치를 패딩 영역에 위치하게 설정합니다.
border-box	배경 이미지의 위치를 테두리 영역에 위치하게 설정합니다.
content-box	배경 이미지의 위치를 컨텐츠 영역에 위치하게 설정합니다.

예제1(Sample)

백그라운드 배경이미지(background-clip)의 고정 여부를 설정하는 예제입니다.

background-clip

background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; -webkit-background-clip: text; color: transparent;

HTML

CSS

SCRIPT

<div class="background-box">
    <div class="box">
        <h2>background-clip</h2>
    </div>
</div>

.background-box .box {
    background-image: url(h../images/hover04.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-clip: border-box;
    max-width: 400px;
    height: 400px;
    border: 10px dotted #000;
    padding: 20px;
}

//Javascript none

예제2(Sample)

백그라운드 이미지(background-origin)의 기준점을 설정하는 예제입니다.

background-origin

background-origin: border-box; background-origin: padding-box; background-origin: content-box;

HTML

CSS

SCRIPT

<div class="background-box">
    <div class="box">
        <h2>background-origin</h2>
    </div>
</div>

.background-box .box {
    background-image: url(../images/hover04.jpg);
    background-repeat: no-repeat;
    background-origin: border-box;
    max-width: 400px;
    height: 400px;
    border: 10px dotted #000;
    padding: 20px;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
background-origin	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---