CSS 배경 크기 속성

예시

"auto"를 사용하여 배경 이미지의 크기를 픽셀 단위로 지정합니다.

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}

#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

background-size속성은 배경 이미지의 크기를 지정합니다 .

이 속성과 함께 사용할 수 있는 네 가지 구문이 있습니다. 키워드 구문("auto", "cover" 및 "contain"), 단일 값 구문(이미지 너비 설정(높이가 "auto"가 됨), 두 값 구문(첫 번째 값: 이미지의 너비, 두 번째 값: 높이) 및 다중 배경 구문(쉼표로 구분).

기본값:	자동
상속:	아니요
애니메이션 가능:	예. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	개체 .style.backgroundSize="60px 120px"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

CSS 구문

속성 값

Value	Description	Play it
auto	Default value. The background image is displayed in its original size
length	Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units
percentage	Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
cover	Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain	Resize the background image to make sure the image is fully visible
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

백분율로 배경 이미지의 크기를 지정합니다.

#example1 {
background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

예시

"cover"로 배경 이미지의 크기를 지정하십시오:

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}

예시

"contain"을 사용하여 배경 이미지의 크기를 지정합니다.

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}

예시

여기에 두 개의 배경 이미지가 있습니다. "contain"으로 첫 번째 배경 이미지의 크기를 지정하고 "cover"로 두 번째 배경 이미지의 크기를 지정합니다.

#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}

예시

다양한 배경 속성을 사용하여 "영웅" 이미지 생성:

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

CSS 참조

CSS Properties