background-size

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	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---