- 기본적인 모습을 예제로 만들어 보았습니다.
- 느낌이 잘 안오시죠? 이제 아래 예제를 통해 하나씩 살펴봅시다 ^^
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('https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C');
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="https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C">
.img_test td {
background-image : url('https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C');
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="https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C">
사용된 CSS (클릭시 보기) :
background-imagebackground-positionbackground-repeatbackground-sizeborderborder-radiuscolorfont-sizefont-weightheightmargin-bottomtext-aligntext-shadowwidth
설명
예제 2
실습 - background-size : contain
보기
background-size : contain
설명
슬라이더를 움직여 보세요 ^^
- 배경이미지의 비율을 유지하면서 전부 보여줍니다.
- 사이즈가 작은쪽은 공백으로 표시가 됩니다.
- 배경이미지의 비율을 유지하면서 전부 보여줍니다.
- 사이즈가 작은쪽은 공백으로 표시가 됩니다.
예제 3
실습 - background-size : cover 설정시 보기
보기
background-size : cover
설명
- 해당 영역의 좌우와 이미지의 좌우를 잘 맞추어서 빈공간이 보이지 않도록 해줍니다.
- 배경 이미지의 비율은 유지되고 리사이즈 + 크롭한것 같은 효과가 됩니다.
- 배경 이미지의 비율과 해당 영역의 비율이 같다면 이미지가 전부 보이게 됩니다.
- 개인적으로는 이미지 리사이즈가 귀찮은 갤러리 썸네일 표시할때 사용하였습니다. ^^;
- 배경 이미지의 비율은 유지되고 리사이즈 + 크롭한것 같은 효과가 됩니다.
- 배경 이미지의 비율과 해당 영역의 비율이 같다면 이미지가 전부 보이게 됩니다.
- 개인적으로는 이미지 리사이즈가 귀찮은 갤러리 썸네일 표시할때 사용하였습니다. ^^;
예제 4
실습 - background-size : % 단위 설정시 보기
보기
background-size : 100%
설명
- 배경 그림을 해당 영역에 가로 기준 100% 로 꽉 채워줍니다.
예제 5
실습 - background-size : ?% ?% 단위로 설정시 보기 (2개 속성)
보기
background-size : 100% 100%
설명
- 해당 영역에 맞게 꽉 채워 줍니다. (가로 세로 100%)
- 이미지의 원래비율은 무시되며 해당영역에 맞게 조절됩니다.
- 이미지의 원래비율은 무시되며 해당영역에 맞게 조절됩니다.
예제 6
실습 - background-size : px 단위 설정시 보기
보기
background-size : 300px
설명
- px 단위 설정은 고정값으로 해당 영역의 크기와 상관없이 크기가 유지됩니다.
- background-size : 300px 400px; 처럼 두개의 값을 사용한 경우 가로, 세로 크기를 지정합니다.
- background-size : 300px 400px; 처럼 두개의 값을 사용한 경우 가로, 세로 크기를 지정합니다.
연구 1
두개의 다른 설정을 비교해 보기
보기
background-size : contain
background-size : cover
background-size : cover
설명
- contain 과 cover 가 아직 어려운 분들을 위해 !
연구 2
영역이 아닌 속성값을 조절해 보기 - % 단위 단일값 사용
보기
설명
- 확대 축소 효과가 되었네요.
- 이것을 이용하여 이미지 확대 보기를 구현한 것도 있습니다.
- 100% 가 원본과 동일한 크기입니다.
- 이것을 이용하여 이미지 확대 보기를 구현한 것도 있습니다.
- 100% 가 원본과 동일한 크기입니다.
연구 3
영역이 아닌 속성값을 조절해 보기 - % 단위 두개값 사용
보기
설명
- 가로 세로 자유롭게 조절할 수 있습니다.
연구 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('/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_test {
background-color : black;
background-repeat : no-repeat;
height : 550px;
border-radius : 10px;
}
#css_test.ghost1 {
background-image : url('/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 (클릭시 보기) :
background-colorbackground-imagebackground-positionbackground-repeatbackground-sizeborder-radiusheight
설명
+ 관련 CSS +
- background배경색, 배경그림과 관련된것을 설정합니다
- background-attachment배경이미지의 고정 방법을 설정합니다
- background-clip배경색, 배경그림의 위치 기준을 지정합니다
- background-color배경색을 지정합니다
- background-image배경 이미지를 설정합니다
- background-origin배경그림의 시작위치를 설정합니다
- background-position배경이미지의 위치를 설정합니다
- background-repeat배경이미지의 반복형태를 설정합니다
- background-size배경이미지의 크기를 설정합니다