background-position Property

Home > Document > CSS > Background > background-position

background-position Property

background-position Property 는 배경으로 지정한 그림의 시작 지점을 지정하는 Property 입니다. 실습에 사용할 그림을 앞의 background-repeat Property에서 사용한 background_position.jpg 입니다.

[표 보는 방법]

background-position Property
Value	[ [<percentage > \| <length > ]{1,2} \| [ [top \| center \| bottom] \|\| [left \| center \| right] ] ] \| Inherit
Initial	0% 0%
Applies to	block-level and replaced elements
Inherited	no
Percentages	refer to the size of the box itself, element 자신이 들어가 있는 박스 크기에 의해서
Media
HTML Syntax	{ background-position: sPosition }
Scripting	object.style.backgroundPosition [ = sPosition ]

CSS Scripting

onClick="this.style.backgroundPosition='center center';"

background-position Property DHTML

지정 않음	center top	right top	left center	center center	right center
left bottom	center bottom	right bottom	50px 50px	30% 30%	50% 150px

위의 DHTML 에서 [ [top | center | bottom] || [left | center | right] ] 등의 그림 위치를 정렬하는 Keyword 들을 Percentage로 바꾸면 아래의 표와 같습니다.

Keyword를 Percentage로 환산한 표
left top	0% 0%	center top	50% 0%
right top	100% 0%	left center	0% 50%
center center	50% 50%	right center	100% 50%
left bottom	0% 100%	center bottom	50% 100%
right bottom	100% 100%	값을 안 주면	left top (0% 0% : Default)

DHTML Source code

<HTML>
    <HEAD>
        <TITLE>background-position Property</TITLE>
        <STYLE type="text/css">
        <!-- 
        .td_button{
        height:18px;
        background-color:royalblue;
        border:1px solid #808080;
        cursor:pointer;
        font-size:11px;
        color:#EFEFEF;
        text-align:center;
        }
        
        .tbl{
        background-image:url(../images/background_position.jpg);
        background-repeat:no-repeat;
        height:300px;
        table-layout:fixed;
        border-collapse:collapse;
        }
        -->
        </STYLE>
    </HEAD>
    <BODY>
    <TABLE id="pos" class="tbl" border="1" cellspacing="0" frame="void">
      <TR>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR>
        <TD>&nbsp;</TD>
        <TD>&nbsp;</TD>
      </TR>
    </TABLE>
    <TABLE border="1" cellspacing="3" width="100%" style="border:1px solid #333333;
    table-layout:fixed;">
      <TR>
        <TD class="td_button" onClick="pos.style.backgroundPosition='';">
        지정 않음</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='top center';">
        top center</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='top right';">
        top right</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='left center';">
        left center</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='center center';">
        center center</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='center right';">
        center right</TD>
      </TR>
      <TR>
        <TD class="td_button" onClick="pos.style.backgroundPosition='left bottom';">
        left bottom</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='center bottom';">
        center bottom</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='right bottom';">
        right bottom</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='50px 50px';">
        50px 50px</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='30% 30%';">
        30% 30%</TD>
        <TD class="td_button" onClick="pos.style.backgroundPosition='50% 50%';">
        50% 150px</TD>
      </TR>
    </TABLE>
    </BODY>
</HTML>

background-position 을 Percentage로 지정할 때 유의해야 될 점은 background-image로 지정한 Box 크기의 백분율이라는 점입니다. 따라서 Percentage로 지정하면 브라우저 창의 크기를 조절함에 따라 위치가 바뀌게 됩니다. 여기를 클릭한 다음 창 크기를 마우스로 조절해 보면 먼 뜻인지 알 수 있습니다. 즉, 창 크기 또는 Box 크기에 따른 상대위치가 되겠습니다.

Top

Back

New

검색