CSS background-position 속성

정의와 사용법

background-position 배경 이미지의 시작 위치를 설정하는 속성입니다.

이 속성은 배경 원본 이미지를 설정합니다. background-image 정의)의 위치에서, 배경 이미지가 반복되는 경우 이 점에서 시작됩니다.

ヒント:background-attachment 속성을 "로 설정해야 합니다.fixed"로 설정해야Firefox와 Opera에서 속성이 정상적으로 작동합니다.

또한 참조:

CSS 강의:CSS 배경

CSS 참조 가이드:background-image 속성

HTML DOM 참조 가이드:backgroundPosition 속성

예제

배경 이미지를 위치시키는 방법:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

직접 테스트해 보세요

CSS 문법

background-position: value;

속성 값

값 설명
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

하나의 키워드만 지정하면 두 번째 값은 "center"가 됩니다.

기본값: 0% 0%.
x% y%

첫 번째 값은 수평 위치이고 두 번째 값은 수직 위치입니다.

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

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

첫 번째 값은 수평 위치이고 두 번째 값은 수직 위치입니다.

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

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

%%와 position 값을 혼합하여 사용할 수 있습니다.

기술 세부 사항

기본값: 0% 0%
thừa kế: no
버전: CSS1
JavaScript 문법: object.style.backgroundPosition="center"

추가 예제

백분율을 사용하여 배경 이미지를 위치시키는 방법
이 예제에서는 백분율을 사용하여 페이지에서 배경 이미지를 위치시키는 방법을 보여줍니다.
픽셀을 사용하여 배경 이미지를 위치시키는 방법
이 예제에서는 픽셀을 사용하여 페이지에서 배경 이미지를 위치시키는 방법을 보여줍니다.

브라우저 지원

표의 숫자는 해당 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.

크롬 엣지 파이어폭스 사파리 오페라
크롬 IE / 엣지 파이어폭스 사파리 오페라
1.0 4.0 1.0 1.0 3.5