background-size
background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
background-size
background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
특징 | 설명 |
---|---|
기본 값 | background-size : auto |
적용 | background |
버전 | CSS1 |
사용성 | ★★★★★ |
정의(Definition)
- background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
백그라운드와 관련된 속성(Background Related Properties)
- background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
- background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
- background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
- background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-color 속성은 백그라운드 색을 설정합니다.
- background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
- background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
- background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
- background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
문법(Syntax)
background-size : length | percentage | auto | cover | contain
/* 기본 속성을 사용한 경우 */
background-size : auto;
background-size : cover;
background-size : contain;
/* length 속성을 사용한 경우 */
background-size : 10px;
background-size : 50%;
/* 너비 값과 높이 값을 설정한 경우 */
background-size : 10px 100px;
background-size : auto 100px;
/* 여러개 이미지의 사이즈를 설정한 경우 */
background-size : 10px, 100px;
background-size : auto, 100px, 200px;
속성(Property)
속성값 | 설명 |
---|---|
auto | 이미지의 실제 크기로 표현됩니다. |
length | 이미지의 크기를 단위로 설정합니다. |
percentage | 이미지의 크기를 %로 설정합니다. |
cover | 이미지를 요소 크기에 맞게 설정됩니다. 화면 크기에 맞게 공백 없이 설정합니다. |
contain | 이미지를 요소 크기에 맞게 설정됩니다. 가로와 세로 비율은 유지되면서 설정합니다. |
예제1(Sample)
백그라운드 이미지 사이즈를 설정하는 예제입니다.
background-size : cover;
background-size : contain;
background-size : 10%;
background-size : 100px;
background-size : auto;
background-size : 10% 100px
background-size : 20% 50%
HTML
CSS
SCRIPT
<div class="background-box"></div>
.background-box {
background-image: url(../images/hover18.jpg);
background-repeat: repeat;
background-position: center;
background-size: 10%;
height: 400px;
}
//Javascript none
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
background-size | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |