Color & Backgrounds

background-image

Setting background images on an element.

Class	Declarations
`bg:url(<…>)`	`background-image: url(<…>);`
`bg:linear-gradient(<…>)`	`background-image: linear-gradient(<…>);`
`bg:radial-gradient(<…>)`	`background-image: radial-gradient(<…>);`
`bg:repeating-linear-gradient(<…>)`	`background-image: repeating-linear-gradient(<…>);`
`bg:repeating-radial-gradient(<…>)`	`background-image: repeating-radial-gradient(<…>);`
`bg:conic-gradient(<…>)`	`background-image: conic-gradient(<…>);`

Examples

Use bg:url(...) to set background-image.

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

Generated CSS

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

Use native CSS gradient functions directly in the class.

<div class="bg:linear-gradient(90deg,red,blue)">  ...</div>

Pair image utilities with background-position, background-size, and background-repeat unless you intentionally want the full background shorthand.

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

<div class="background-image:none background-image:none@print bg:url(/hero.jpg)@sm">...</div>

Use local or bundled assets according to the framework integration you are using.

Setting the background color of an element.

Setting the background's origin.