background-position 속성

속성 background-position은 요소의 배경 이미지 위치를 설정합니다. 위치는 크기 단위를 사용하여 지정할 수 있습니다. 첫 번째 값은 왼쪽으로부터의 거리를, 두 번째 값은 위쪽으로부터의 거리를 나타냅니다.

키워드로 위치를 지정할 수도 있습니다. 이 경우 값의 순서는 중요하지 않습니다. 수직 방향 키워드: top, center, bottom. 수평 방향 키워드: left, center, right.

키워드 사용 방법

키워드로 이미지를 배치하려면, 수직 값 하나와 수평 값 하나를 지정해야 합니다. 예를 들어, 값 top right를 지정하면 이미지는 오른쪽 상단에 위치합니다.

단어의 순서는 중요하지 않습니다: top right라고 쓸 수도 있고, right top라고 쓸 수도 있습니다. center 키워드가 있는 경우 - 생략할 수 있습니다. 예를 들어, top center는 그냥 top와 같습니다. 그리고 center center는 그냥 center와 같습니다.

문법

css선택자 {
  background-position: 공백으로 구분된 두 값;
}

예제

기본적으로 배경 이미지는 왼쪽 상단 모서리에 위치합니다:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 오른쪽 상단 모서리에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: top right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 오른쪽 하단 모서리에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: bottom right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 오른쪽에, 수직으로는 중앙에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: right center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 블록의 중앙에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: center center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 왼쪽으로부터 20px, 위쪽으로부터 40px 떨어진 곳에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: 20px 40px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 왼쪽으로부터 90%, 위쪽으로부터 100% 떨어진 곳에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: 90% 100%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 왼쪽으로부터 30px 떨어진 곳에, 수직으로는 하단에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: 30px bottom;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 왼쪽으로부터 30px 떨어진 곳에, 수직으로는 중앙에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: 30px center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

배경 이미지를 위쪽으로부터 30px 떨어진 곳에, 수평으로는 중앙에 배치해 봅시다:

html<div id="elem"></div>

css#elem {
  background-position: center 30px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

참고 항목