background-size

엘리먼트의 배경 이미지 크기를 제어하는 유틸리티입니다.

Class Styles

Class	Styles
`bg-auto`	`background-size: auto;`
`bg-cover`	`background-size: cover;`
`bg-contain`	`background-size: contain;`
`bg-(<custom-property>)`	`background-size: var(<custom-property>);`
`bg-[<value>]`	`background-size: <value>;`

bg-auto

background-size: auto;

bg-cover

background-size: cover;

bg-contain

background-size: contain;

bg-(<custom-property>)

background-size: var(<custom-property>);

bg-[<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-[<value>] 구문을 사용하세요 background image size를 완전히 커스텀한 값으로 설정하려면:

<div class="bg-[200px_100px] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 bg-(<custom-property>) 구문을 사용할 수도 있습니다:

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

이는 bg-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

접두사 a background-size 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.