스타일시트 background-image position : 위치 지정속성

background-position
값	[<percentage> \| <length>]{1,2} \| [top \| center \| bottom] \|\| [left \| center \| right]
초기값	0% 0%
상 속	no
적 용	블록레벨 요소와 대체 요소

'background-position' 속성은 배경 이미지의 시작 위치를 지정합니다.
포지션 값은 한번 또는 두번이 나올 수 있습니다.

1) 키워드

'키워드'의 기본값은 top left 입니다.
키워드는 다섯가지입니다. top, left, right, center, bottom.
이들 키워드는 두개의 방향을 나타나기만 하면 됩니다. 나타나는 순서는 상관이 없습니다.
만일 하나의 키워드만이 설정된다면 다른 하나는 'center'가 됩니다.
즉, background-position: top right; 나 background-position: right top;은 같습니다.

DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: top right;
}

DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: right top;
}

즉,

단일 키워드	동일한 값
top	top center center top
left	left center center left
right	right center center right
center	center center
bottom	bottom center center bottom

2) percentage

'percentage'의 기본값은 0% 입니다.
백분율을 사용할 경우에는 항상 수평 값이 먼저 옵니다.
background-position: 수평값 수직값
만약 백분율 값을 하나만 쓴 경우에는 무조건 주어진 하나의 값을 수평값으로 간주하고 수직값은 50%로 계산됩니다.
이미지를 가운데 위치하고 싶다면..

DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: 50% 50%
}
로 하면 됩니다.

3) length

'length' 값은 '길이' 단위를 쓸 수 있습니다. 이것 역시 한가지 값만을 쓸 때에는 수평값으로 간주하고, 수직값은 50%로 계산됩니다.
'length' 는 음수, 양수 값이 가능합니다.

DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: -20px -20px;
}

로 표현이 가능합니다.
'length'는 백분율값과 같이 쓸 수도 있습니다.

DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: 20% -20px;
}

DIV {
background-image: url(이미지경로);
background-repeat: no-repeat;
background-position: right -20px;
}