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 크기에 따른 상대위치가 되겠습니다.




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색