CSS 배경이미지의 위치(background-position)

background-repeat 속성값으로 no-repeat을 지정하면 배경이미지가 반복되지 않고, 문서의 왼쪽 상단에 위치합니다.

이 위치를 바꿀때 사용하는 속성이 background-position 입니다.

<table width="90%" cellpadding="0" cellspacing="0" border="1" align="center" style="background-image: url(bg.gif) ; background-repeat:no-repeat; background-position:center right">
<tr height="100">
<td width="30%">top left</td>
<td width="30%">top center</td>
<td width="30%">top right</td>
</tr>
<tr height="100">
<td>center left</td>
<td>center center</td>
<td>center right</td>
</tr>
<tr height="100">
<td>bottom left</td>
<td>bottom center</td>
<td>bottom right</td>
</tr>
</table>

예제에서는 center right 값으로 지정하였습니다.

top left top center top right

center left center center center right

bottom left bottom center bottom right