background-repeat

예제

기본 예제

bg-repeat 유틸리티를 사용하여 배경 이미지를 수직 및 수평으로 반복할 수 있습니다:

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

수평 반복

bg-repeat-x 유틸리티를 사용하면 배경 이미지를 수평으로만 반복할 수 있습니다:

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

세로 방향으로 반복하기

bg-repeat-y 유틸리티를 사용하면 배경 이미지를 세로 방향으로만 반복할 수 있습니다.

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

클리핑 방지

배경 이미지가 잘리지 않도록 반복하려면 bg-repeat-space 유틸리티를 사용하세요:

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

클리핑과 간격 방지

클리핑 없이 배경 이미지를 반복하고, 필요한 경우 간격을 방지하기 위해 이미지를 늘리려면 bg-repeat-round 유틸리티를 사용하세요:

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

반복 비활성화

배경 이미지가 반복되지 않도록 하려면 bg-no-repeat 유틸리티를 사용하세요:

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

반응형 디자인

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

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

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