본문 바로가기
프로그래밍

CSS - 백그라운드 반복 Repeat

새벽그림자 2011. 8. 17. 13:51
출처 : http://devnote7.tistory.com 

* 사용법
- Style : {    background-repeat:Property;    }
- JavaScript : object.style.backgroundRepeat = 'Property'

<html>
<head></head>
<body>
    <table border="1">
        <tr>
            <td width="50%">repeat : 기본값, 배경이미지가 가로, 세로 방향으로 모두 반복</td>
            <td height="200" background="이미지주소" width="50%">&nbsp;</td>
        </tr>
        <tr>
            <td width="50%">no-repeat : 배경이미지가 한번만 적용</td>
            <td style="BACKGROUND-REPEAT: no-repeat;" background="이미지주소" 
            height="200" width="50%">&nbsp;</td>
        </tr>
        <tr>
            <td width="50%">repeat-x : 배경이미지가 X축(가로방향)으로 반복되어 적용</td>
            <td style="BACKGROUND-REPEAT: repeat-x;" background="이미지주소" 
            height="200" width="50%">&nbsp;</td>
        </tr>
        <tr>
            <td width="50%">배경이미지가 Y축(세로방향)으로 반복되어 적용</td>
            <td style="BACKGROUND-REPEAT: repeat-y;" background="이미지주소" 
            height="200" width="50%">&nbsp;</td>
        </tr>
    </table>
</body>
</html>


* 결과
repeat : 기본값,
            배경이미지가 가로, 세로 방향으로 모두 반복		  
no-repeat : 배경이미지가 한번만 적용  
repeat-x : 배경이미지가 X축(가로방향)으로 반복되어 적용  
배경이미지가 Y축(세로방향)으로 반복되어 적용  
저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

ASP - 최근본 상품  (0) 2011.08.17
ASP - 쿠키 유지기간 설정  (0) 2011.08.17
CSS - 투명도 filter:alpha(opacity=0);  (0) 2011.08.17
CSS - line-height:1.3em 글자간격  (0) 2011.08.17
CSS - textarea 스크롤바 없애기 overflow:hidden;  (0) 2011.08.17

'프로그래밍' Related Articles

티스토리툴바