CSS background-position-x 속성

정의와 사용법

background-position-x 속성은 배경 이미지의 x축 위치를 설정합니다.

ヒント：기본적으로, 배경 이미지는 요소의 왼쪽 상단에 배치되며 수직 및 수평 방향으로 반복됩니다.

예제

예제 1

x축에서 배경 이미지를 위치시키는 방법:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

직접 테스트해 보세요

예제 2

배경 이미지를 오른쪽에 위치시키는 방법:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

직접 테스트해 보세요

예제 3

배경 이미지의 백분율 위치 사용 방법:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

직접 테스트해 보세요

예제 4

배경 이미지의 픽셀 위치 사용 방법:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

직접 테스트해 보세요

예제 5

빠른 배경 이미지를 생성하여 컨테이너를 덮는 방법:

.hero-image {
  background-image: url("photographer.jpg"); /* 사용하는 이미지 */
  background-color: #cccccc; /* 이미지가 사용할 수 없으면 이 색상을 사용합니다 */
  height: 300px; /* 높이를 설정해야 합니다 */
  background-position-x: center; /* 이미지를 중앙에 배치합니다 */
  background-repeat: no-repeat; /* 이미지를 반복하지 않습니다 */
  background-size: cover; /* 배경 이미지 크기를 전체 컨테이너를 덮기 위해 조정합니다 */
}

직접 테스트해 보세요

CSS 문법

background-position-x: value;

속성 값

기술 세부 사항

브라우저 지원

표中的数字表示首个完全支持该属性的浏览器版本。

관련 페이지

教程:CSS 배경

CSS 참조:background-image 속성

CSS 참조:background-position 속성

CSS 참조:background-position-y 속성

HTML DOM 참조:backgroundPosition 속성