background-repeat Property


Home > Document > CSS > Background > background-repeat

background-repeat Property

background-repeat Property는 지정한 배경 그림을 반복(repeat) 시키거나 시키지 않거나(no-repeat), 수평으로 반복(repeat-x), 수직으로 반복(repeat-y) 하는 것을 지정하는 Property 입니다. 기본값은 반복(repeat)입니다. 실습에 사용할 그림을 여기를 우클릭하여 '다른 이름으로 그림 저장' 을 선택하여 Myfolder/images 폴더에 저장하고, 새로운 HTML 문서를 시작하고 Myfolder/html 폴더에 저장합니다. 그림 파일 이름은 background_position.jpg 입니다.

  [표 보는 방법]
background-repeat Property
Value repeat | repeat-x | repeat-y | no-repeat | Inherit
Initial repeat
Applies to all elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { background-repeat: sRepeat }
Scripting object.style.backgroundRepeat [ = sRepeat ]




CSS Scripting
onClick="this.style.backgroundRepeat='no-repeat';"

먼저 background-repeat Property 값을 주지 않고 backgroudn-image Property를 사용해서 그림을 배경으로 지정합니다. 아래는 Type selector를 사용하여 Body 에 그림을 지정했습니다.

background-repeat 의 초기값
<HTML>
    <HEAD>
        <TITLE>background-repeat 의 초기값</TITLE>
    <STYLE type="text/css">
    <!-- 
    body { background-image : url("../images/background_position.jpg") }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    
    </BODY>
</HTML>
출력결과


background-repeat : no-repeat

background-repeat Property의 기본값이 repeat (반복) 이기 때문에 그림에 창에 꽉 차도록 그림이 반복 됩니다. 이 때 반복되는 그림의 갯수는 창의 크기에 따라 다르겠져? 이번에는 background-repeat 의 값을 no-repeat 로 주고 Coding해 보시져.

no-repeat
<HTML>
    <HEAD>
        <TITLE>background-repeat : no-repeat</TITLE>
    <STYLE type="text/css">
    <!-- 
    body { background-image : url("../images/background_position.jpg");
    background-repeat:no-repeat; }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    
    </BODY>
</HTML>
출력결과


backgroudn-repeat : repeat-x

repeat-x는 지정한 그림을 x 방향(가로 방향)으로만 반복합니다. 반복되는 갯수 역시 창 크기에 따라 달라집니다.

repeat-x
<HTML>
    <HEAD>
        <TITLE>background-repeat : repeat-x</TITLE>
    <STYLE type="text/css">
    <!-- 
    body { background-image : url("../images/background_position.jpg");
    background-repeat : repeat-x; }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    
    </BODY>
</HTML>
출력결과


background-repeat : repeat-y

repeat-y는 지정한 그림을 y 방향(세로 방향)으로만 반복합니다. 반복되는 갯수는 창 크기에 따라 달라집니다.

repeat-x
<HTML>
    <HEAD>
        <TITLE>background-repeat : repeat-y</TITLE>
    <STYLE type="text/css">
    <!-- 
    body { background-image : url("../images/background_position.jpg");
    background-repeat : repeat-y; }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    
    </BODY>
</HTML>
출력결과


다음 페이지에서는 배경 그림의 위치를 지정하는 background-position Property 에 대해서 알아 봅니다.




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

Top
Back
New
검색