Style backgroundPosition 속성

정의와 사용법

backgroundPosition 속성 설정 또는 배경 이미지가 요소 내에서의 위치를 반환합니다.

자세히 보기:

HTML 스타일:background 속성

CSS 강의:CSS 배경

CSS3 강의:CSS3 배경

CSS 참조 메뉴:background-image 속성

CSS 참조 메뉴:background-position 속성

인스턴스

예제 1

배경 이미지 위치를 변경하려면:

document.body.style.backgroundPosition = "top right";

직접 시험해 보세요

예제 2

div 요소의 배경 이미지 위치를 아래 중앙으로 변경하려면:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

직접 시험해 보세요

예제 3

<div> 요소의 배경 이미지 위치를 수평 200픽셀과 수직 40픽셀로 변경합니다:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

직접 시험해 보세요

예제 4

<div> 요소의 배경 이미지 위치 반환:

document.getElementById("myDiv").style.backgroundPosition;

직접 시험해 보세요

문법

backgroundPosition 속성 반환:

object.style.backgroundPosition

backgroundPosition 속성 설정:

object.style.backgroundPosition = value

속성 값

값 설명
  • 상단 왼쪽
  • 상단 중앙
  • 상단 오른쪽
  • 중앙 왼쪽
  • 중앙 중앙
  • 중앙 오른쪽
  • 하단 왼쪽
  • 하단 중앙
  • 하단 오른쪽
 만약 하나의 키워드만 지정하면, 다른 값은 "center"가 됩니다.
x% y%

x 값은 수평 위치를, y 값은 수직 위치를 나타냅니다.

왼쪽 상단은 0% 0%입니다. 오른쪽 하단은 100% 100%입니다.

만약 하나의 값만 지정하면, 다른 값은 50%가 됩니다.
xpos ypos

x 값은 수평 위치를, y 값은 수직 위치를 나타냅니다.

왼쪽 상단은 0 0입니다. 단위는 픽셀 (0px 0px) 또는 다른 CSS 단위일 수 있습니다.

만약 하나의 값만 지정하면, 다른 값은 50%가 됩니다. %와 단위를 혼합 사용할 수 있습니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 부모 요소에서 이 속성을 상속받습니다. 참조: inherit.

기술 세부 사항

기본 값: 0% 0%
반환 값: 문자열로 배경 이미지 위치를 나타냅니다.
CSS 버전: CSS1

브라우저 지원

backgroundPosition CSS1 (1996) 기능입니다.

모든 브라우저에서 완전히 지원됩니다:

크롬 에지 파이어폭스 사파리 오페라 IE
크롬 에지 파이어폭스 사파리 오페라 IE
지원 지원 지원 지원 지원 지원