배경 이미지는 제목이나 본문에서 한쪽에 이미지를 표시할 때도 이용할 수 있습니다. 이때 background-position 속성을 이용해 배경 이미지가 표시되는 위치를 조절합니다.
background-position
background-position은 배경 이미지의 위치를 정하는 속성입니다.
기본형
background-position : x-position | y-position
- x-position: 가로 위치를 정합니다.
- y-position : 세로 위치를 정합니다.
위치 값으로 사용할 수 있는 것은 다음과 같습니다.
- 가로 위치 값
left | center | right | 백분율 | 길이
- 세로 위치 값
top | center | bottom | 백분율 | 길이
예제
예제 1
<p>background-position: 30px 100px;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 200px;
border: 1px solid #bcbcbc;
background-image: url("https://bit.ly/2HU6Ozp");
background-repeat: no-repeat;
background-position: 30px 100px;
}
예제 2
<p>background-position: 50% 50%;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 200px;
border: 1px solid #bcbcbc;
background-image: url("https://bit.ly/2HU6Ozp");
background-repeat: no-repeat;
background-position: 50% 50%;
}