background
Setting multiple background properties with one shorthand.
Overview
| Class | Declarations |
|---|---|
bg:<image>|<position>/<size>|<repeat> | background: <image> <position>/<size> <repeat>;
|
background:<value> | background: <value>;
|
Examples
Use the background shorthand
Combine an image, position, size and repetition in one bg:* class. Pipes separate values; / separates position from size.
<!-- Centered cover · one shorthand --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg:url(/demo/landscape.svg)|center/cover|no-repeat"></div>Generated CSS
@layer utilities { .bg\:url\(\/demo\/landscape\.svg\)\|center\/cover\|no-repeat { background: url(/demo/landscape.svg) center/cover no-repeat }}The image has a 320 × 200 intrinsic size. The 320 × 160 frame crops it vertically when centered and covered. A background is decorative: put essential imagery and alternative text in an <img>.
Prefer focused utilities for simple changes
Hover or focus each surface. The first changes only the background color, preserving its image, size and position. The second applies the full shorthand and resets the omitted image to none.
<!-- Color longhand · keeps the image --><div id="target" tabindex="0" role="img" aria-label="Change only the background color" class="h:160px w-xs max-w:100% bg-center bg-no-repeat background-size:160px|100px bg-surface-muted background-image:url(/demo/landscape.svg) bg-blue-20:hover@screen bg-blue-20:focus-visible@screen"></div><!-- Full shorthand · resets the image --><div id="target" tabindex="0" role="img" aria-label="Reset the complete background" class="h:160px w-xs max-w:100% bg-center bg-no-repeat background-size:160px|100px bg-surface-muted background-image:url(/demo/landscape.svg) background:var(--color-blue-20):hover@screen background:var(--color-blue-20):focus-visible@screen"></div>bg-blue-20 resolves to background-color; background:var(--color-blue-20) explicitly requests the native shorthand. Choose color, image, position, size or repeat utilities when the other parts should stay intact.
Apply conditionally
Widen the actual preview viewport to sm to apply the complete image shorthand. Narrow screens and print keep a plain surface.
<!-- Plain surface → image at sm --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-surface-muted background:white@print bg:url(/demo/landscape.svg)|center/cover|no-repeat@screen@sm"></div>The screen-qualified condition does not run during printing. The print shorthand clears the image and resets the other background longhands.