background-repeat

background-repeat (배경 반복)

배경 이미지를 얼마나 반복해서 채울지를 정하는 유틸리티예요. 가로/세로 방향별로 반복하거나, 반복을 끄고 싶을 때 유용해요.

출처: 문서

본문

ClassStyles

Examples

Basic example

bg-repeat 유틸리티를 사용하면 배경 이미지를 세로와 가로로 모두 반복해요.

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>

Repeating horizontally

bg-repeat-x 유틸리티를 사용하면 배경 이미지를 가로로만 반복해요.

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>

Repeating vertically

bg-repeat-y 유틸리티를 사용하면 배경 이미지를 세로로만 반복해요.

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>

Preventing clipping

bg-repeat-space 유틸리티를 사용하면 배경 이미지를 잘리지 않게 반복해요.

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>

Preventing clipping and gaps

bg-repeat-round 유틸리티를 사용하면 배경 이미지를 잘리지 않게 하되, 필요하면 늘려서 빈틈이 생기지 않게 반복해요.

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>

Disabling repeating

bg-no-repeat 유틸리티를 사용하면 배경 이미지가 반복되지 않게 해요.

<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>

Responsive design

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

<div class="bg-repeat md:bg-repeat-x ...">
  <!-- ... -->
</div>

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

더 알아보기 (Learn more)