CSS 참조가이드

CSS @규칙(RULES)

CSS 속성大全

CSS3 background-size 속성 사용 방법 및 예제

CSS 배경-size 속성이 지정한 배경 이미지의 크기.

다음 표는 이 속성의 사용 상황과 버전 역사를 요약합니다.

기본 값：	auto auto
적용 대상：	모든 요소
thừa kế:	없음
애니메이션 가능성：	입니다.참조 애니메이션 속성。
버전：	CSS3의 새 기능
JavaScript 문법:	object　　　object.style.backgroundSize="60px 80px"

배경 크기 사용 문법

이 속성의 문법은 다음과 같습니다：

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

아래 예제는 background-size 속성.

예제

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px　dashed　#333;
　　　　background:　url("images/sky.jpg)　no-repeat;
　　　　background-size:　contain;
}

테스트를 보세요‹/›

추가 정보:이 background-size 속성은 일반적으로 전체 크기 배경 이미지를 생성하는 데 사용되며, 이 배경 이미지는 브라우저의 뷰포트 또는witdh 크기에 따라 확장됩니다.

속성 값

다음 표는 이 속성의 값을 설명합니다.

값	설명
length	배경 이미지의 너비와 높이를 지정된 길이로 설정합니다. 첫 번째 값은 너비를 설정하고, 두 번째 값은 높이를 설정합니다. 하나의 값만 지정한 경우, 두 번째 값은 기본적으로 auto로 설정됩니다. 음수 길이 값을 사용할 수 없습니다.
percentage	배경 이미지의 너비와 높이를 배경 정위치 영역의 백분율로 설정합니다. 첫 번째 값은 너비를 설정하고, 두 번째 값은 높이를 설정합니다. 하나의 값만 지정한 경우, 두 번째 값은 기본적으로 auto로 설정됩니다. 음수 백분율을 사용할 수 없습니다.
auto	하나의 auto 값을 배경 이미지의 해당 방향의 크기 조정에 사용하여, 원래 비율을 유지합니다. 두 가지 크기 모두 값을 지정한 경우, 배경 이미지는 자신의 너비와 높이를 포함하여, 기본 동작입니다.
cover	이미지의 원래 가로 세로 비율을 유지하면서(있는 경우), 가장 작은 크기를 확장하여 배경 정위치 영역을 완전히 덮습니다.
contain	이미지를 줄이면서 원래의 가로 세로 비율을 유지하며(있는 경우), 가장 큰 크기를 확장하여 배경 정위치 영역에 맞게 가로와 세로 크기 모두를 맞춥니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 background를 사용합니다.-size 속성의 계산 값.

브라우저 호환성

background-size 속성의 브라우저 호환성, 모든 주요 브라우저에서 이 속성을 지원합니다.

	파이어폭스 4+ 구글 크롬4+ 인터넷 익스플로러 9+ 애플 사파리 3+ 오페라 10。5+

추가로 읽어보기

다음 튜토리얼을 참조하십시오:CSS 배경，CSS3배경。

CSS border 속성 CSS 배경-repeat 속성