background-repeat

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

background-repeat 는 배경 이미지의 반복형태를 설정합니다.

예제 1
개요 - 배경의 반복 형태
보기
repeat repeat-y
repeat-x no-repeat
space round
설명

background-repeat : repeat  -  배경 반복
background-repeat : repeat-y  -  배경 세로로 반복
background-repeat : repeat-x  -  배경 가로로 반복
background-repeat : no-repeat  -  배경 반복 안함
background-repeat : space  -  배경 패턴이 들어갈 만큼 채우고 여백은 공백처리
background-repeat : round  -  배경 패턴이 들어갈 만큼 채우고 늘려서 꽉채움 (여백없음)

예제 2
실습 - 배경 반복 형태 바꿔보기
보기
CSS 공작소
반복 선택
background-repeat : repeat
설명
- 직접 선택해 보세요 ^^
예제 3
실습 - background-repeat : space 가 무엇인지 해보자
보기
width :
550px
 
height :
350px
 
설명
- 배경이미지를 공백을 두고 반복합니다.
- 이미지가 짤리거나 리사이즈 되지 않도록 공백으로 조절됩니다.
- 브라우저에 따라 적용되지 않을 수 있습니다.
예제 4
실습 - background-repeat : round 가 무엇인지 해보자
보기
width :
550px
 
height :
350px
 
설명
- 위 space 와 비슷하나 큰 차이점은 공백을 두지 않습니다.
- 대신 리사이즈를 하여 이어 붙입니다.
- 즉 공백이 들어갈 곳을 리사이즈하여 매꾸는 것이지요.
- 브라우저에 따라 적용되지 않을 수 있습니다.
예제 5
개요 - background-position : 100% 100%; 와의 조합
보기
background-repeat : repeat background-repeat : repeat-y
background-repeat : repeat-x background-repeat : no-repeat
설명

위 예제는

- background-position : 100% 100%  을 설정한 상태입니다.
- background-position : right bottom  과 동일합니다.

참고 : background-position

예제 6
개요 - background-position : center; 와의 조합
보기
background-repeat : repeat background-repeat : repeat-y
background-repeat : repeat-x background-repeat : no-repeat
소스
<style type="text/css">
    .css_test td {
        background-image : url('http://superkts.com/img/css/bg0678.jpg');
        background-position : center;
        border : 2px solid black;
        height : 280px;
        text-align : center;
        width : 280px;
    }
    .css_test td span {
        background : #fff;
        border-radius : 5px;
        border : 1px solid gray;
        font-weight : bold;
        padding : 10px;
    }
</style>

<div class="css_test">
    <div style="background-repeat:repeat;"></div>
</div>

<table class="css_test" cellpadding="0" cellspacing="7" align="center">
    <tr>
        <td style="background-repeat:repeat;"><span>background-repeat : repeat</span></td>
        <td style="background-repeat:repeat-y;"><span>background-repeat : repeat-y</span></td>
    </tr>
    <tr>
        <td style="background-repeat:repeat-x;"><span>background-repeat : repeat-x</span></td>
        <td style="background-repeat:no-repeat;"><span>background-repeat : no-repeat</span></td>
    </tr>
</table>
설명

- background-position : center  는
- background-position : 50% 50%  와 동일합니다.

참고 : background-position

연구 1
달리는 강아지 - 제이쿼리로 배경제어
보기
소스
<style type="text/css">
    .css_test {
        background-image : url('http://superkts.com/img/css/dogs.gif');
        background-repeat : repeat-x;
        height : 100px;
    }
</style>

<div class="css_test"></div>

<script type="text/javascript">

    function css_test(){
        $('.css_test').css({'background-position':'-=1'}); // 배경이미지를 왼쪽으로 1px 씩 계속 움직임
    }
    setInterval(css_test, 10);

</script>
사용된 CSS (클릭시 보기) : background-imagebackground-repeatheight
설명

- 애니메이션 GIF 파일과 CSS 배경그림설정 그리고 jQuery 를 이용하여 만들어 보았습니다.
- 강아지들이 귀엽네요 .. 마치 ..
- 소스는 엄청간단한데 효과는 만점이네요. 바로 이런거죠 ㅋ
- "제이쿼리 공작소" 를 오픈하게 되면 다루도록 하겠습니다.

※ 이 예제에 대한 강좌는 http://biketago.com/ev175 에서 보실 수 있습니다.

+ 관련 CSS +