Color & Backgrounds

background-repeat

Setting how background images are repeated.

Examples

Use bg-no-repeat when a background image should render once.

<section class="bg-no-repeat bg:url(/hero.jpg)">  ...</section>

Generated CSS

@layer utilities {  .bg-no-repeat {    background-repeat: no-repeat  }  .bg\:url\(\/hero\.jpg\) {    background-image: url(/hero.jpg)  }}

Use bg-repeat-x or bg-repeat-y for stripes, dividers, and patterned backgrounds.

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

Use background-repeat:* for values that do not have a shortcut.

Apply styles based on different states using selectors and conditional queries.

<div class="bg-no-repeat bg-no-repeat@print bg-repeat@sm">...</div>

Most photographic backgrounds should use bg-no-repeat; repeating is mainly for patterns.

Setting the initial position for background image.

Setting the size of the background image.