웹 개발자는 배경 이미지의 시작 위치를 조정해야 할 때 CSS의 background-position 속성을 사용합니다. 이 글에서는 background-position 속성이 무엇인지, 그리고 이를 활용해 배경 이미지의 위치를 어떻게 변경할 수 있는지 자세히 살펴보겠습니다.
문법(Syntax)
CSS 선택자 내에서 background-position 속성의 기본 문법은 다음과 같습니다.
background-position: value;
background-position의 값은 크게 세 가지 방식으로 선언할 수 있습니다.
1. 키워드 쌍(Keyword Pair) 사용
다음과 같은 키워드 조합을 사용할 수 있습니다.
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
첫 번째 단어는 수평축(x축)을, 두 번째 단어는 수직축(y축)을 나타냅니다. 값을 하나만 선언하면 y값은 자동으로 'center'로 설정됩니다.
2. 백분율(x%, y%) 사용
키워드 방식과 마찬가지로 최대 두 개의 값을 지정할 수 있으며, 하나는 x축의 수평 위치, 다른 하나는 y축의 수직 위치를 의미합니다. 값을 하나만 입력하면 y%는 50%로 설정되어 y축 기준 중앙에 정렬됩니다. 각 모서리의 백분율 값은 다음과 같습니다.
- 왼쪽 상단(left top): 0% 0%
- 오른쪽 상단(right top): 100% 0%
- 왼쪽 하단(left bottom): 0% 100%
- 오른쪽 하단(right bottom): 100% 100%
3. CSS 단위(px / rem / em / pt) 사용
앞선 두 방식과 유사하지만, 백분율 대신 CSS 단위로 숫자를 지정합니다. 필요하다면 백분율과 rem/em/px/pt 단위를 혼합해서 사용하는 것도 가능합니다. 두 번째 값을 생략하면 ypos는 50%로 설정됩니다.
아래 예제들은 첫 번째 방식(키워드 쌍)의 다양한 값을 실제로 적용한 결과입니다.
예제 1: 왼쪽 상단(Top Left)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Top Left</title>
<style>
body {
background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: top left;
display: flex;
flex-flow: row wrap;
}
div {
height: 200px;
width: 25%;
background: transparent;
border: 5px double ivory;
margin: 20px;
}
#text-block {
background: ivory;
border: 5px double black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="text-block">
top left
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="script.js">
</script>
</body>
</html>
예제 2: 오른쪽 중앙(Center Right)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Center Right</title>
<style>
body {
background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
display: flex;
flex-flow: row wrap;
}
div {
height: 200px;
width: 25%;
background: transparent;
border: 5px double ivory;
margin: 20px;
}
#text-block {
background: ivory;
border: 5px double black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="text-block">
center right
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="script.js">
</script>
</body>
</html>
예제 3: 왼쪽 하단(Bottom Left)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bottom Left</title>
<style>
body {
background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: bottom left;
display: flex;
flex-flow: row wrap;
}
div {
height: 200px;
width: 25%;
background: transparent;
border: 5px double ivory;
margin: 20px;
}
#text-block {
background: ivory;
border: 5px double black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="text-block">
bottom left
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="script.js">
</script>
</body>
</html>
마무리
지금까지 CSS의 background-position 속성을 활용해 배경 이미지의 위치를 조정하는 다양한 방법을 알아보았습니다. 위 예제 코드에서 배경 이미지를 다른 것으로 바꾸거나 위치 값을 변경해 가면서 직접 실험해 보세요. 키워드, 백분율, CSS 단위를 자유롭게 조합하면 원하는 레이아웃을 훨씬 더 정교하게 구현할 수 있습니다.