background-repeat

Setting how background images are repeated.

Overview

Examples

Disable tiling

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

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

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

Repeat on one axis

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 conditionally

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

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

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