CSS3 background-size Property

배경 화상의 크기를 지정

div {
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

더 "Try it Yourself" 아래의 예.

정의 및 사용

배경 크기 속성은 배경 이미지의 크기를 지정한다.

기본값:	auto
상속 :	no
애니메이션 :	yes. Read about animatable Try it
번역:	CSS3
자바 스크립트 구문 :	object .style.backgroundSize="60px 120px" Try it

테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.

숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.

재산
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -O-

값	기술	플레이
auto	기본값. 배경 이미지는 너비와 높이를 포함	»플레이
length	배경 이미지의 폭과 높이를 설정한다. 첫 번째 값은 제 가치의 높이를 설정하고, 폭을 설정한다. 단지 하나의 값이 제공되면, 두번째로 설정되고 "auto"	»플레이
percentage	부모 요소의 퍼센트에서 배경 이미지의 폭과 높이를 설정한다. 첫 번째 값은 제 가치의 높이를 설정하고, 폭을 설정한다. 단지 하나의 값이 제공되면, 두번째로 설정되고 "auto"	»플레이
cover	배경 영역이 완전히 배경 화상에 의해 덮여 지도록 가능한 한 크게 배경 이미지 규모. 배경 이미지의 일부는 배경 영역 내에 위치 감안하지 않을	»플레이
contain	가장 큰 크기로 이미지 크기를 조정의 폭과 높이가 모두 콘텐츠 영역 내부에 들어갈 수 있도록	»플레이
initial	기본값으로이 속성을 설정합니다. 초기에 대해 알아보기	»플레이
inherit	부모 요소에서이 속성을 상속합니다. 대한 상속 읽기

완전히 컨텐츠 영역을 커버하는 배경 이미지 스트레치 :

div {
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

정확히 네 개의 사본이 수평에 맞게 있도록 배경 이미지를 스트레치 :

div {
background: url(w3css.gif);
background-size: 25%;
}