background-size

background-size은 백그라운드 이미지 사이즈를 설정합니다.

특징	설명
기본 값	auto
상속	안됨
애니메이션	가능
버전	CSS3

Definition

• background-size은 백그라운드 이미지 사이즈를 설정합니다.

Syntax

background-size : length | percentage | auto | cover | contain | inherit;

background-size : auto auto; (기본값)
background-size : 120px 100px; (length)
background-size : 100% 50%; (percentage)
background-size : contain;
background-size : cover;

Property

속성 값	설명
auto	이미지의 실제 크기로 표현됩니다.
length	이미지의 크기를 단위로 설정합니다.
percentage	이미지의 크기를 %로 설정합니다.
cover	이미지를 요소 크기에 맞게 설정됩니다. 화면 크기에 맞게 공백없이 설정합니다.
contain	이미지를 요소 크기에 맞게 설정됩니다. 가로와 세로 비율은 유지되면서 설정합니다.
inherit	background-size를 부모 요소로부터 속성을 상속받습니다.

Compatibility

						6	7	8	9	10	11

Sample

background-size

background-size : auto;
background-size : 100px;
background-size : 100px 200px;
background-size : 50%;
background-size : 100%;
background-size : cover;
background-size : contain;