This is a preview, you can find the current version here.
Last updated: 12/5/2025
Backgrounds
Atomic classes for controlling the background properties of an element’s background image.
Background size
| Class | Output |
|---|---|
.bg-auto | background-size: auto; |
.bg-cover | background-size: cover; |
.bg-contain | background-size: contain; |
Background repeat
| Class | Output |
|---|---|
.bg-repeat | background-repeat: repeat; |
.bg-no-repeat | background-repeat: no-repeat; |
.bg-repeat-x | background-repeat: repeat-x; |
.bg-repeat-y | background-repeat: repeat-y; |
Background position
| Class | Output |
|---|---|
.bg-bottom | background-position: bottom; |
.bg-center | background-position: center; |
.bg-left | background-position: left; |
.bg-left-bottom | background-position: left bottom; |
.bg-left-top | background-position: left top; |
.bg-right | background-position: right; |
.bg-right-bottom | background-position: right bottom; |
.bg-right-top | background-position: right top; |
.bg-top | background-position: top; |
Background position examples
<div class="bg-no-repeat bg-bottom">…</div>
<div class="bg-no-repeat bg-center">…</div>
<div class="bg-no-repeat bg-left">…</div>
<div class="bg-no-repeat bg-left-bottom">…</div>
<div class="bg-no-repeat bg-left-top">…</div>
<div class="bg-no-repeat bg-right">…</div>
<div class="bg-no-repeat bg-right-bottom">…</div>
<div class="bg-no-repeat bg-right-top">…</div>
<div class="bg-no-repeat bg-top">…</div>.bg-bottom
.bg-center
.bg-left
.bg-left-bottom
.bg-left-top
.bg-right
.bg-right-bottom
.bg-right-top
.bg-top
Background attachment
| Class | Output |
|---|---|
.bg-fixed | background-attachment: fixed; |
.bg-local | background-attachment: local; |
.bg-scroll | background-attachment: scroll; |
Background image
| Class | Output |
|---|---|
.bg-image-none | background-image: none; |
Background utilities
Confetti
Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects prefers-reduced-motion and displays the static version of the background when necessary. No JavaScript required.
<div class="bg-confetti-animated">…</div>
<div class="bg-confetti-static">…</div>