background

Setting all background style properties at once.

Overview

Examples

Use the background shorthand

Use bg:* with pipe separators when several background longhands should be set together.

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

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

Prefer focused utilities for simple changes

Use background-color, background-image, background-position, background-size, and background-repeat when only one background part should change.

<article class="bg:white bg-center bg-cover">    ...</article>

The native background shorthand resets several background longhands. Use it intentionally when that reset is part of the design.

Apply conditionally

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

<div class="bg:white bg:url(/hero.jpg)|center/cover|no-repeat@sm bg:white@print">...</div>

Use layered backgrounds with comma-separated values only when the visual needs multiple images or gradients.