background-position 속성이란?
css 프로퍼티로 background-image 를 설정할 때, 해당 이미지의 위치값을 설정하는데 사용되는 속성입니다.
보통 아래와 같은 형태로 많이 사용하며, 이렇게 적용하게 되면 div 요소의 가장자리에서 왼쪽 방향으로 100px, 아래 방향으로 50px 만큼 백그라운드 이미지를 이동하라는 뜻입니다.
div {
background-image: url('image url');
background-position: 100px 50px;
}이 외에도 해당 속성에 값을 부여할 수 있는 방식이 생각보다 다양하게 있어 이에 대해 포스팅하고자 합니다.
속성에 적용될 수 있는 값의 형태
background-position 속성에 적용할 수 있는 값은 최소 1개 ~ 최대 4개까지 가능합니다.
이는 MDN 문서에서 터득한 정보이며, 설명을 위해 이해하기 쉬운 순서대로 정리해보았습니다.
keyword 와 non-keyword
먼저, 이 속성에는 keyword 와 non-keyword 형태의 값을 전달할 수 있습니다.
non-keyword 는 px, % 와 같이 표현되어 전달되는 값들을 말합니다.
non-keyword를 전달하게 되면, keyword 를 기준으로 해당 값만큼 이동하라는 뜻입니다.
keyword 란, top, bottom, left, right, center 를 말하며 이는 백그라운드 이미지를 포함하고 있는 요소에서 그 이미지가 위치하게 될 시작점이라고 할 수 있습니다.
키워드는 % 값으로도 표현할 수 있습니다.
| Keyword | value | offset |
|---|---|---|
| left | 0% | x |
| right | 100% | x |
| top | 0% | y |
| bottom | 100% | y |
| center | 50% | x, y |
left, right 은 요소의 x축 방향 (수평)의 각 끝을, top, bottom 은 요소의 y축 방향 (수직) 에서 각 끝을 의미합니다.
이 키워드만 전달하고 non-keyword 값이 함께 주어지지 않으면, 백그라운드 이미지는 이동하지 않습니다.
center 키워드는 다른 키워드와 달리, non-keyword 없이도 이동 값을 가진 것처럼 동작합니다. 다른 키워드처럼 각 끝이 아니라 정가운데를 의미하기 때문입니다.
또한, 특정 축에 관계없이 어떤 축에서든 해당 키워드를 사용할 수 있습니다.
이제부터 이 값들을 가지고 해당 속성에 어떻게 값을 적용하는지 알아보겠습니다.
1. 4개의 값
background-position: left 100px top 100px;첫번째-세번째 자리에는 keyword 가 오고, 두번째-네번째 자리에는 non-keyword 가 오는 경우입니다.
keyword 를 기준으로 non-keyword 값만큼 백그라운드 이미지가 움직입니다.
코드가 매우 직관적이어서 이해하기 쉽습니다.
keyword 에는 어떤게 먼저 오든지 상관이 없습니다. 단, 첫번째에 x축 방향의 키워드를 작성했다면, 세번째에는 y축 방향으로 정의됩니다. 그 반대의 경우에도 마찬가지입니다.
만약 아래와 같이 코드를 작성했다면, 결과는 어떻게 될까요?
background-position: left 100px right 100px;첫번째 자리의 키워드가 left 로 정해졌기 때문에, 세번째 자리에 오는 키워드는 top, bottom 중에 하나여야 합니다. 따라서, 이 코드는 유효하지 않은 코드가 되어 속성 값이 적용되지 않습니다.
2. 2개의 값
2개의 값이 오는 경우에는 keyword or non-keyword or 혼합하여 올 수 있습니다.
기본값은 left top or 0% 0% 입니다.
1. keyword 만 오는 경우
먼저 추가한 키워드에 따라, 다음 값의 축의 방향이 결정됩니다. 즉, 어떤게 먼저 와도 상관이 없습니다.
또한 키워드만 오는 경우에는, 백그라운드 이미지가 이동하지 않습니다.
background-position: left top;
background-position: top left; // 어떤게 먼저 와도 동일함2. non-keyword 만 오는 경우
이 경우에는 항상 앞의 값은 x축인 요소의 왼쪽에서, 뒤의 값은 y축인 요소의 위에서 적용됩니다.
background-position: 50px 100px;3. 혼합한 경우
이 경우에도 항상 앞의 값이 x축, 뒤의 값은 y축에 적용됩니다.
때문에, 앞의 값에 top, bottom 이 오거나, 뒤의 값에 left, right 가 오게 되면 유효하지 않은 코드가 되어 속성 값이 적용되지 않습니다.
어떤게 먼저 와야 하는지 헷갈린다면, 항상 첫번째 값을 x축 방향의 거리로 설정하는 습관을 들이세요.
non-keyword 가 x축이라면 요소의 왼쪽에서, y축이라면 요소의 위에서부터 그 값을 적용하여 위치를 결정합니다.
// 올바른 적용
background-position: left 100px;
background-position: 100px top;
// 올바르지 않은 적용
background-position: 100px left;
background-position: top 100px;3. 3개의 값
background-position: left 100px top;
background-position: left top 100px;3개의 값을 전달하는 경우에는, 특정 축에서만 이미지를 이동시키겠다는 뜻입니다.
따라서 두번째 or 세번째 자리 중 한곳에만 non-keyword 값이 오며, 나머지 자리에는 항상 keyword 가 위치해야 합니다. 앞선 경우들과 똑같이, 키워드 하나가 left 로 정해졌다면 다른 하나는 top, bottom 이 와야 합니다.
키워드 이후에 non-keyword 가 오면, 그 키워드에 해당하는 축에서 해당 값만큼 백그라운드 이미지가 이동합니다.
그러므로 아래와 같이 작성한 코드는 속성 값이 적용되지 않습니다.
background-position: left right 100px;
background-position: left 100px 100px;4. 1개의 값
이 경우는 위의 경우들과 달리, 특별한 케이스에 해당합니다.
기본적으로 1개의 값만 주어지면, 다른 한쪽이 자동으로 50% 로 설정됩니다.
4-1. % 값의 계산방법
% 는 px 과 같은 절대값과 다르게 계산됩니다.
position 속성처럼 해당 축 방향에서 % 만큼 이동하지도 않습니다.
만약 x축이 0% 라면 요소의 왼쪽에 이미지의 왼쪽 모서리를 닿게, 100%라면 요소의 오른쪽에 이미지의 오른쪽 모서리를 닿게 정렬합니다. 반대 축의 경우에는 요소의 상하단에 닿게 정렬합니다.
따라서, 50% 를 각 축의 방향에 전달하게 되면, 이미지의 50%에 해당하는 좌표가 요소의 가운데에 위치하게 되므로, 이미지가 가운데 정렬이 됩니다.
keyword 값이 작동하는 방식과 동일하게 느껴집니다.
x축에서 0%는 left, 100%는 right를 가리키는 것 같습니다. 그렇다면, 50%는 center 에 수렴하게 됩니다.
MDN 문서에는 non-keyword 에 % 값이 주어지면, 다음과 같이 계산된다고 적혀 있습니다.
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value) 요소와 백그라운드 이미지의 너비 혹은 높이가 같다면, 전달한 % 를 아무리 곱해도 항상 0이 되기 때문에 요소의 너비와 백그라운드 이미지의 너비, 높이가 같을 때는 % 값이 적용되지 않습니다.
따라서, 요소의 너비와 높이를 백그라운드 이미지의 너비, 높이와 다르게 설정해야 해당 속성이 어떻게 적용되는지 확인할 수 있습니다.
만약 요소와 백그라운드의 이미지의 너비나 높이가 같을 때, 이미지를 이동시키고 싶다면 % 대신 px 과 같은 절대값을 전달하면 됩니다.
non-keyword 의 값 1개만 전달한 경우, x축 방향의 거리를 이동합니다. y축 방향은 자동으로 50%로 설정되기 때문에, 0 을 1개만 전달하는 경우에 0 0 과 다른 결과가 나타납니다.
background-position: center; // center 50% 와 동일함
background-position: 50%; // 50% 50% 와 동일함
background-position: 0; // 0% 0% 가 아니라 0% 50% 와 동일함.keyword 1개만 전달한 경우에는 해당 키워드의 반대가 되는 축에서 이미지가 가운데 정렬됩니다.
즉, top, bottom 이 전달됐다면 수평으로, left, right 가 전달된다면 수직으로 이미지가 가운데 정렬됩니다.
background-position: top; // top 50%
background-position: left; // left 50%
background-position: right; // right 50%
background-position: bottom; // bottom 50%