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

# Background Attachment

Utilities for controlling how a background image behaves when scrolling.

## Quick reference

| Class | Description |
|-------|-------------|
| `bg-fixed` | `background-attachment: fixed` |
| `bg-local` | `background-attachment: local` |
| `bg-scroll` | `background-attachment: scroll` |

## Basic usage

### Fixed

Use `bg-fixed` to fix the background image relative to the viewport.

```html
<div class="bg-fixed ..."></div>
```

### Local

Use `bg-local` to scroll the background image with the container and the viewport.

```html
<div class="bg-local ..."></div>
```

### Scroll

Use `bg-scroll` to scroll the background image with the viewport, but not with the container.

```html
<div class="bg-scroll ..."></div>
```