[DOM_Style] JS - backgroundOrigin 속성 - 배경이미지 좌표시작점 설정/반환 (= 백그라운드오리진 속성)

style.backgroundOrigin 예제

 

<style> 

#hz {

  border: 1px solid black;

  width: 300px;

  height: 150px;

  padding: 35px;

  background: url('https://i.imgur.com/PQNhCln.gif') no-repeat top right;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">

홈짱닷컴 Homzzang.com

</div>

<script>

function homzzang() {

  document.getElementById("hz").style.backgroundOrigin = "content-box";

}

</script>

 

결과보기

backgroundOrigin  정의 

 

배경이미지 좌표 시작점 지정. 

 

---

 

1.

기본값: padding-box

반환값: background-origin 속성의 속성값 나타내는 문자열

CSS버전: CSS3

2.

IE9 이상 주요 최신 브라우저 모두 지원. 

 

backgroundOrigin 구문 

 

[접근] 

object.style.backgroundOrigin

 

 

[설정]

object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"

 

---

[속성값]

 

padding-box 

패딩 가장자리의 왼쪽 상단에서 배경이미지 시작. (기본값)

 

border-box

테두리의 왼쪽 상단에서 배경이미지 시작.

 

content-box

내용의 왼쪽 상단에서 배경이미지 시작.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.