Các tiện ích để kiểm soát sự lặp lại của hình nền của một phần tử.
| Class | Styles |
|---|---|
bg-repeat | background-repeat: repeat; |
bg-repeat-x | background-repeat: repeat-x; |
bg-repeat-y | background-repeat: repeat-y; |
bg-repeat-space | background-repeat: space; |
bg-repeat-round | background-repeat: round; |
bg-no-repeat | background-repeat: no-repeat; |
Sử dụng tiện ích bg-repeat để lặp lại hình nền cả theo chiều dọc và chiều ngang:
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>Sử dụng tiện ích bg-repeat-x để chỉ lặp lại hình nền theo chiều ngang:
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>Sử dụng tiện ích bg-repeat-y để chỉ lặp lại hình nền theo chiều dọc:
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>Sử dụng tiện ích bg-repeat-space để lặp lại hình nền mà không bị cắt xén:
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>Sử dụng tiện ích bg-repeat-round để lặp lại hình nền mà không bị cắt xén, kéo giãn nếu cần để tránh khoảng trống:
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>Sử dụng tiện ích bg-no-repeat để ngăn hình nền lặp lại:
<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>Prefix a background-repeat utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="bg-repeat md:bg-repeat-x ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.