background-size 속성

background-size 속성은 배경 이미지의 크기를 설정합니다. 속성 값으로는 크기 단위 또는 키워드 auto, cover, contain 중 하나를 사용합니다.

구문

css선택자 {
  background-size: 값;
}

키워드

값	설명
`auto`	배경은 원본 이미지의 실제 크기인 자연스러운 크기를 갖습니다. 한쪽 방향에만 `auto`가 지정된 경우, 그 방향으로 배경은 비율을 왜곡하지 않도록 조정됩니다.
`cover`	비율을 유지하면서 이미지를 확대/축소하여 요소 전체를 덮도록 합니다. 이미지는 전체가 들어가려고 하지만 항상 성공하는 것은 아니므로 일부가 잘릴 수 있습니다. 요소는 항상 이미지로 완전히 덮입니다.
`contain`	비율을 유지하면서 이미지를 확대/축소하여 요소 내에 전체가 들어가도록 합니다. 이미지 비율과 요소 크기에 따라 너비 전체를 차지하거나 높이 전체를 차지할 수 있습니다. 일반적으로 요소는 이미지로 완전히 덮이지 않습니다 (대신 이미지는 축소되어도 전체가 항상 보입니다).

기본값: auto.

사용법

크기 단위와 auto는 다양한 조합으로 사용할 수 있습니다. 예: auto 20px, 30% 20px, auto 30% 등. 이 경우 첫 번째 매개변수는 배경의 너비를, 두 번째 매개변수는 배경의 높이를 설정합니다. 하나의 매개변수만 지정되면 너비와 높이 모두에 동시에 적용됩니다.

예제

현재 배경 이미지는 자연스러운 크기를 갖습니다:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 550px;
  height: 400px;
}

Результат:

예제

현재 배경 이미지는 300px by 400px 크기가 됩니다 (이 경우 이미지 비율이 왜곡됨):

html<div id="elem"></div>

css#elem {
  background-size: 300px 400px;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

예제

현재 배경 이미지는 400px by 400px 크기가 됩니다 (이 경우 이미지 비율이 왜곡됨):

html<div id="elem"></div>

css#elem {
  background-size: 400px;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

예제

현재 배경 이미지는 수평 방향으로 400px 크기가 되고, 수직 방향 크기는 비율이 왜곡되지 않도록 조정됩니다:

html<div id="elem"></div>

css#elem {
  background-size: 400px auto;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

예제

현재 배경 이미지는 수직 방향으로 400px 크기가 되고, 수평 방향 크기는 비율이 왜곡되지 않도록 조정됩니다:

html<div id="elem"></div>

css#elem {
  background-size: auto 400px;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

Результат:

예제 . contain 값

contain 값의 동작을 확인하세요:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

예제 . cover 값

cover 값의 동작을 확인하세요:

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

예제 . cover 동작 개선

cover 값의 동작은 background-position 속성으로 이미지를 중앙 정렬하여 개선할 수 있습니다 (이 경우 말의 뒷부분이 아니라 머리 부분이 보이는 영역에 들어오게 됨):

html<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

css.elem {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("bg.png");
  border: 1px solid black;
  margin-bottom: 20px;
}

#elem1 {
  width: 600px;
  height: 500px;
}

#elem2 {
  width: 500px;
  height: 600px;
}

#elem3 {
  width: 400px;
  height: 400px;
}

#elem4 {
  width: 300px;
  height: 400px;
}

#elem5 {
  width: 200px;
  height: 400px;
}

#elem6 {
  width: 300px;
  height: 100px;
}

Результат:

같이 보기

배경에 대한 단축 속성인 background 속성