스타일 backgroundPosition 속성
예시
배경 이미지의 위치를 변경합니다.
document.body.style.backgroundPosition = "top right";
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
backgroundPosition 속성은 요소 내 배경 이미지의 위치를 설정하거나 반환합니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| backgroundPosition | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
통사론
backgroundPosition 속성을 반환합니다.
object.style.backgroundPosition
backgroundPosition 속성을 설정합니다.
object.style.backgroundPosition = value
속성 값
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the other value will be "center". |
| x% y% | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
| 기본값: | 0% 0% |
|---|---|
| 반환 값: | 배경 이미지의 위치를 나타내는 문자열 |
| CSS 버전 | CSS1 |
더 많은 예
예시
<div> 요소에서 배경 이미지의 위치를 중앙 하단으로 변경합니다.
document.getElementById("myDiv").style.backgroundPosition = "center bottom";
예시
<div> 요소에서 배경 이미지의 위치를 가로 200px, 세로 40px로 변경합니다.
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
예시
<div> 요소에서 배경 이미지의 위치를 반환합니다.
document.getElementById("myDiv").style.backgroundPosition;
관련 페이지
CSS 튜토리얼: CSS 배경
CSS 참조: background-image 속성
CSS 참조: background-position 속성
HTML DOM 참조: 배경 속성