---
url: /docs/foundations/css-classes/background-image.md
---
> Backgrounds

# Background Image

Utilities for controlling an element's background image.

## Quick reference

| Class | Description |
|-------|-------------|
| `bg-none` | `background-image: none` |
| `bg-[url({url})]` | `background-image: url({url})` |
| `bg-[url(var(--any-css-variable))]` | `background-image: var(--any-css-variable)` |

> `{url}`: *Any valid image url*

## Basic usage

### Arbitrary values

If you need to use a one-off `background-image` value, use square brackets to generate a property on the fly using any url.

```html
<div class="bg-[url(...)] ..."></div>
```