background-origin 속성은 요소의 배경 이미지가 어느 영역을 기준으로 배치될지(기준점)를 설정하거나 조회할 때 사용합니다. 이 속성은 CSS 박스 모델의 네 가지 영역 중 하나를 기준으로 지정할 수 있습니다.
문법(Syntax)
backgroundOrigin 속성을 설정하는 문법은 다음과 같습니다.
object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"
속성 값(Value)
backgroundOrigin 속성에 사용할 수 있는 값은 아래와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | padding-box 배경 이미지를 패딩 박스(padding box)를 기준으로 배치합니다. 이 값은 기본값(default)입니다. |
| 2 | border-box 배경 이미지를 테두리 박스(border box)를 기준으로 배치합니다. |
| 3 | content-box 배경 이미지를 콘텐츠 박스(content box)를 기준으로 배치합니다. |
| 4 | initial 해당 속성을 초기값으로 설정합니다. |
| 5 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 버튼 클릭 시 자바스크립트로 backgroundOrigin 속성 값을 동적으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
margin: 20px;
box-shadow: 0 0 5px black;
padding: 30px;
background: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
font-size: 24px;
}
div>p {
box-shadow: 0 0 5px darkgrey;
}
</style>
<script>
function changeBackOrigin(){
document.getElementById("DIV1").style.backgroundOrigin="padding-box";
document.getElementById("Sample").innerHTML="배경 기준점이 이제 padding-box로 설정되었습니다";
}
</script>
</head>
<body>
<h2>PowerBI Tutorial</h2>
<div id="DIV1">
<p>Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI... Learn PowerBI...Learn PowerBI...</p>
</div>
<p>아래 버튼을 클릭하면 위 div의 배경 기준점이 변경됩니다</p>
<button onclick="changeBackOrigin()">CHANGE ORIGIN</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE ORIGIN 버튼을 클릭하면 배경 이미지의 기준점이 content-box에서 padding-box로 변경된 것을 확인할 수 있습니다.
참고 사항
background-origin 속성은 background-attachment가 fixed로 설정된 경우에는 적용되지 않습니다. 또한 background-clip 속성과 함께 사용하면 배경 이미지와 배경 색상이 어느 영역까지 그려질지 세밀하게 제어할 수 있어 실무에서 유용하게 활용됩니다.