[css3] background-origin 속성

 

 

[css3] background-origin 속성

background-origin 속성은 배경 이미지의 위치를 어디서부터 시작할지 지정합니다.

 

background-image 속성과, background-clip 속성과 함께 사용하는데

 

background-clip 속성

 

배경 이미지를 넣는 background-image 속성

 

 

background-clip은 배경 이미지가 border, padding, content 세 영역 중에서

 

어디에서 잘릴지 지정하는 속성입니다. 

 

 

background-origin 역시 border, padding, content 세 영역 중에서 시작 위치를 지정합니다.

 

▶ 문법

 

background-origin: padding-box|border-box|content-box|initial|inherit;

 

* padding-box  기본값. 배경 이미지는 padding box에 관계하여 위치 함.

* border-box 배경 이미지가 border box에 관계하여 위치 함.

* content-box 배경 이미지가 content box에 관계하여 위치 함.

* 상속 여부 : no

 

* background-attachment 속성값이 fixed이면, background-origin  속성이 무시 됨.

 

 

▶브라우저 지원 상세 : IE9+, Crome 4.0+, firefox 4.0+, safari 3.0+, opera 10.5+

 

 

▶background-origin 접두어 버전 

 

-webkit-background-origin: padding-box|border-box|content-box /* Safari and Chrome */
-moz-background-origin: padding-box|border-box|content-box /* Firefox */
-ms-background-origin: padding-box|border-box|content-box  /* Internet Explorer */
-o-background-origin: padding-box|border-box|content-box  /* Opera */ 

 

html/css 작성 예를 보겠습니다~

background-origin.htm

 

 

html

<div id="test">
<h3>background-clip: border-box;</h3>
<h3>background-origin: border-box;</h3>
</div>

 

<div id="test2">
<h3>background-clip: padding-box;</h3>
<h3>background-origin: padding-box;</h3>
</div>

<div id="test3">
<h3>background-clip: content-box;</h3>
<h3>background-origin: content-box;</h3>
</div>

 

 

css

div{
width:300px;
height:200px;
padding:10px;
margin: 20px;
border: 8px dashed #E4C97E;
background-image: url(leaf.png);
}

#test{
background-clip: border-box;
background-origin: border-box;
}

 

실행 화면입니다. 이미지 위치가 border에서부터 시작합니다.

 

css

#test2{
background-clip: padding-box;
background-origin: padding-box;
}

 

배경 이미지 위치가 padding에서부터 시작합니다.

 

 

 

css

#test3{
background-clip: content-box;
background-origin: content-box;
}

 

배경이미지가 내용 영역에서 시작합니다.

 

 

 

 

참조: http://www.quackit.com/css/css3/properties/css_background-origin.cfm

 

background 속성(배경 전체 지정)

 

background-position 속성(배경이미지 위치 지정)

 

background-attachment 속성(배경이미지 고정)

 

background-repeat 속성(배경 이미지 패턴)