# Background Position

Set the background image position within an element.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 25 · Edge 12 · Firefox 13 · Safari 7

| Class | Properties | Value |
|-------|------------|-------|
| `bp:b` | background-position | `bottom` |
| `bp:c` | background-position | `center` |
| `bp:l` | background-position | `0` |
| `bp:lb` | background-position | `0 100%` |
| `bp:lt` | background-position | `0 0` |
| `bp:r` | background-position | `100%` |
| `bp:rb` | background-position | `100% 100%` |
| `bp:rt` | background-position | `100% 0` |
| `bp:t` | background-position | `top` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `bp:b` | background-position | `bottom` |
| `bp:c` | background-position | `center` |
| `bp:l` | background-position | `0` |
| `bp:lb` | background-position | `0 100%` |
| `bp:lt` | background-position | `0 0` |
| `bp:r` | background-position | `100%` |
| `bp:rb` | background-position | `100% 100%` |
| `bp:rt` | background-position | `100% 0` |
| `bp:t` | background-position | `top` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `bp:b` | background-position | `bottom` |
| `bp:c` | background-position | `center` |
| `bp:l` | background-position | `0` |
| `bp:lb` | background-position | `0 100%` |
| `bp:lt` | background-position | `0 0` |
| `bp:r` | background-position | `100%` |
| `bp:rb` | background-position | `100% 100%` |
| `bp:rt` | background-position | `100% 0` |
| `bp:t` | background-position | `top` |