CSS background-origin 속성
예시
배경 이미지가 콘텐츠의 왼쪽 상단 모서리에서 시작되도록 하십시오.
#example1 {
border: 10px dashed black;
padding:
25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 background-origin
배경 이미지의 원점 위치(배경 위치 지정 영역)를 지정합니다.
참고: 이 속성은 background-attachment 가 "fixed"인 경우 효과가 없습니다.
기본값: | 패딩 박스 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.backgroundOrigin="내용 상자" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS 구문
background-origin: padding-box|border-box|content-box|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
padding-box | Default value. The background image starts from the upper left corner of the padding edge | |
border-box | The background image starts from the upper left corner of the border | |
content-box | The background image starts from the upper left corner of the content | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
<div> 요소에 대해 두 개의 배경 이미지를 설정합니다. "paper.gif" 배경 이미지는 패딩 가장자리의 왼쪽 상단 모서리에서 시작하고 "img_tree.gif" 배경 이미지는 콘텐츠의 왼쪽 상단 모서리에서 시작하도록 합니다.
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box, padding-box;
}
관련 페이지
CSS 튜토리얼: CSS 배경
HTML DOM 참조: backgroundOrigin 속성