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

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

<div style="width:250; height:250; background-image: url(bg.gif) ; background-repeat:no-repeat"></div>

이 위치를 바꿀때 사용하는 속성이 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

※출처 : http://www.homejjang.com/