background-size

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

background-size 는 설정된 배경화면의 크기를 조절합니다.

예제 1
background-size 개요 - 속성별 보기
보기
200px 500%
200px 100px 100% 100%
contain cover

사용한 이미지
소스
<style type="text/css">
    .img_test td {
        background-image : url('http://cfile21.uf.tistory.com/image/2469B33354D74FB23BC466');
        background-position : center;
        background-repeat : no-repeat;
        border-radius : 5px;
        border : 4px solid gray;
        color : white;
        font-size : 22pt;
        font-weight : bold;
        height : 250px;
        margin-bottom : 10px;
        text-align : center;
        text-shadow : 0 0 5px black;
        width : 50%;
    }
</style>

<table class="img_test" cellpadding="0" cellspacing="5" align="center" width="80%">
    <tr>
        <td style="background-size:200px;">200px</td>
        <td style="background-size:500%;">500%</td>
    </tr>
    <tr>
        <td style="background-size:200px 100px;">200px 100px</td>
        <td style="background-size:100% 100%;">100% 100%</td>
    </tr>
    <tr>
        <td style="background-size:contain;">contain</td>
        <td style="background-size:cover;">cover</td>
    </tr>
</table>
<br>사용한 이미지
<br><img src="http://cfile21.uf.tistory.com/image/2469B33354D74FB23BC466">
설명
- 기본적인 모습을 예제로 만들어 보았습니다.
- 느낌이 잘 안오시죠? 이제 아래 예제를 통해 하나씩 살펴봅시다 ^^
예제 2
실습 - background-size : contain
보기
background-size : contain
width :
400px
 
height :
300px
 
설명
슬라이더를 움직여 보세요 ^^

- 배경이미지의 비율을 유지하면서 전부 보여줍니다.
- 사이즈가 작은쪽은 공백으로 표시가 됩니다.
예제 3
실습 - background-size : cover 설정시 보기
보기
background-size : cover
width :
400px
 
height :
300px
 
설명
- 해당 영역의 좌우와 이미지의 좌우를 잘 맞추어서 빈공간이 보이지 않도록 해줍니다.
- 배경 이미지의 비율은 유지되고 리사이즈 + 크롭한것 같은 효과가 됩니다.
- 배경 이미지의 비율과 해당 영역의 비율이 같다면 이미지가 전부 보이게 됩니다.

- 개인적으로는 이미지 리사이즈가 귀찮은 갤러리 썸네일 표시할때 사용하였습니다. ^^;
예제 4
실습 - background-size : % 단위 설정시 보기
보기
background-size : 100%
width :
400px
 
height :
300px
 
설명
- 배경 그림을 해당 영역에 가로 기준 100% 로 꽉 채워줍니다.
예제 5
실습 - background-size : ?% ?% 단위로 설정시 보기 (2개 속성)
보기
background-size : 100% 100%
width :
400px
 
height :
300px
 
설명
- 해당 영역에 맞게 꽉 채워 줍니다. (가로 세로 100%)
- 이미지의 원래비율은 무시되며 해당영역에 맞게 조절됩니다.
예제 6
실습 - background-size : px 단위 설정시 보기
보기
background-size : 300px
width :
400px
 
height :
300px
 
설명
- px 단위 설정은 고정값으로 해당 영역의 크기와 상관없이 크기가 유지됩니다.
- background-size : 300px 400px; 처럼 두개의 값을 사용한 경우 가로, 세로 크기를 지정합니다.
연구 1
두개의 다른 설정을 비교해 보기
보기
background-size : contain

background-size : cover
width :
400px
 
height :
250px
 
설명
- contain 과 cover 가 아직 어려운 분들을 위해 !
연구 2
영역이 아닌 속성값을 조절해 보기 - % 단위 단일값 사용
보기
background-size :
100%
 
CSS 공작소
설명
- 확대 축소 효과가 되었네요.
- 이것을 이용하여 이미지 확대 보기를 구현한 것도 있습니다.
- 100% 가 원본과 동일한 크기입니다.
연구 3
영역이 아닌 속성값을 조절해 보기 - % 단위 두개값 사용
보기
background-size :
100%
100%
 
CSS 공작소
설명
- 가로 세로 자유롭게 조절할 수 있습니다.
연구 4
공포체험 - 깜놀 주의 !!! 절대 주의 !!! (CSS 로 무섭게 하기 예제)
보기
약간 무서울 수 있습니다. 절대 심장이 약하신 분은 하지 마세요 !!!
소스
<style type="text/css">

    #css_test {
        background-color : black;
        background-repeat : no-repeat;
        height : 550px;
        border-radius : 10px;
    }

    #css_test.ghost1 {
        background-image : url('http://superkts.com/img/css/ghost.gif');
        background-position : 50% 50%;
        background-size : 0;
    }

</style>

<script type="text/javascript">

    var chk = false;

    function ghostIn(){
        if(chk) return;
        chk = true;
        $('#css_test').stop().animate({'background-size':'+=80%'}, 500, ghostOut);
    }

    function ghostOut(){
        $('#css_test').stop().animate({'background-size':'-=80%'}, 5000, ghostEnd);
    }

    function ghostEnd(){
        chk = false;
    }

</script>

<div class="bold red ac pd5">약간 무서울 수 있습니다. 절대 심장이 약하신 분은 하지 마세요 !!!</div>
<div id="css_test" class="ghost1"></div>
<div class="mt5 ac">
    <button type="button" onclick="ghostIn()">준비됬으면 누르세요 !</button>
</div>
설명
- 공포 수위 조절 했는데 적절한지 모르겠네요 ^^;


☞ 전 체 화 면 버 전 ☜ ☞ 제작 과정 ☜
+ 관련 CSS +