예
배경 이미지를 배치하는 방법 :
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
배경 위치 속성은 배경 이미지의 시작 위치를 설정합니다.
Tip: 기본적으로 배경 이미지는 요소의 왼쪽 상단 모서리에 배치, 모두 수직 및 수평으로 반복된다.
| 기본값: | 0% 0% |
|---|---|
| 상속 : | no |
| 애니메이션 : | yes. Read about animatable Try it |
| 번역: | CSS1 |
| 자바 스크립트 구문 : | object .style.backgroundPosition="center" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 및 이전 하나의 요소에 여러 개의 배경 이미지를 지원하지 않습니다.
CSS 구문
background-position:value;속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | 당신은 단지 하나의 키워드를 지정하는 경우, 다른 값이 될 것 "center" | »플레이 |
| x% y% | 첫 번째 값은 수평 위치이고 두번째 값은 수직이다. 왼쪽 상단은 0 % 0 %입니다. 오른쪽 하단 모서리는 100 % 100 %입니다. 당신은 단지 하나의 값을 지정하면 다른 값이 50 % 일 것이다. . 기본값은 0 % 0 % | »플레이 |
| xpos ypos | 첫 번째 값은 수평 위치이고 두번째 값은 수직이다. 왼쪽 상단은 0 0 단위는 픽셀 수입니다 (0px 0px) 또는 다른 CSS 단위 . 당신은 단지 하나의 값을 지정하면 다른 값이 50 % 일 것이다. 당신은 %와 위치를 혼합 할 수 있습니다 | »플레이 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
어떻게 퍼센트를 사용하여 배경 이미지를 배치하는 방법 :
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
»그것을 자신을 시도 예
어떻게 픽셀을 이용하여 배경 화상을 배치하려면
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
»그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 배경
CSS 참조 : background-image property
HTML DOM 참조 : backgroundPosition property