background-size

background-size (배경 크기)

배경 이미지를 컨테이너에 맞춰 어떻게 크기를 조절할지를 정하는 유틸리티예요. cover나 contain 같은 값을 자주 써요.

출처: 문서

클래스	스타일
`bg-auto`	`background-size: auto;`
`bg-cover`	`background-size: cover;`
`bg-contain`	`background-size: contain;`
`bg-size-(<custom-property>)`	`background-size: var(<custom-property>);`
`bg-size-[<value>]`	`background-size: <value>;`

bg-cover 유틸리티를 사용하면 배경 이미지가 배경 레이어를 가득 채울 때까지 확대하고, 필요하면 이미지를 잘라내요.

<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>

bg-contain 유틸리티를 사용하면 배경 이미지를 잘리지도, 늘어지지도 않게 바깥쪽 모서리에 맞춰 확대해요.

<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>

bg-auto 유틸리티를 사용하면 배경 이미지를 기본 크기로 표시해요.

<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>

완전히 커스텀한 값으로 배경 크기를 지정하고 싶다면 bg-size-[<value>] 문법을 사용해요.

<div class="bg-size-[auto_100px] ...">
  <!-- ... -->
</div>

CSS 변수로 지정하고 싶다면 bg-size-(<custom-property>) 문법도 사용할 수 있어요.

<div class="bg-size-(--my-image-size) ...">
  <!-- ... -->
</div>

이것은 bg-size-[var(<custom-property>)]의 단축 표기로, var() 함수를 자동으로 넣어 주는 문법이에요.

background-size 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="bg-auto md:bg-contain ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.