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 에 대해서 알아 봅니다.

Top

Back

New

검색