Utilities
Backgrounds
Generated from the registry, so this page can't drift from the compiler.
bg
Sets the background. The call form sets background-color; the bracket form sets the background shorthand.
Syntax
bg(value)
bg[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
bg(brand)
bg(alpha(brand,20))
hover:bg(brand-dark)
bg[#121212]
bg[linear-gradient(90deg,#000,#333)].bg\(alpha\(brand\,20\)\) {
background-color: color-mix(in srgb, var(--croff-color-brand) 20%, transparent);
}
.bg\(brand\) {
background-color: var(--croff-color-brand);
}
.bg\[\#121212\] {
background: #121212;
}
.bg\[linear-gradient\(90deg\,\#000\,\#333\)\] {
background: linear-gradient(90deg,#000,#333);
}
.hover\:bg\(brand-dark\):hover {
background-color: var(--croff-color-brand-dark);
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use. Use bg-color when you need a raw color that must not reset other background properties.
Responsive and state usage
md:bg(brand)
hover:bg(brand)
lg:focus:bg(brand)bg-color
Sets background-color in both forms, never the shorthand.
Syntax
bg-color(value)
bg-color[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
bg-color(dark)
bg-color[oklch(70%_0.2_120)].bg-color\(dark\) {
background-color: var(--croff-color-dark);
}
.bg-color\[oklch\(70\%_0\.2_120\)\] {
background-color: oklch(70% 0.2 120);
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:bg-color(dark)
hover:bg-color(dark)
lg:focus:bg-color(dark)bg-image
Sets the background image.
Syntax
bg-image(value)
bg-image[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none |
| var(--name) | See type |
Examples and generated CSS
bg-image(none)
bg-image[url(/hero.png)].bg-image\(none\) {
background-image: none;
}
.bg-image\[url\(\/hero\.png\)\] {
background-image: url(/hero.png);
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:bg-image(none)
hover:bg-image(none)
lg:focus:bg-image(none)bg-size
Sets the background image size.
Syntax
bg-size(value)
bg-size[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto cover contain |
Examples and generated CSS
bg-size(cover)
bg-size[50%_auto].bg-size\(cover\) {
background-size: cover;
}
.bg-size\[50\%_auto\] {
background-size: 50% auto;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:bg-size(cover)
hover:bg-size(cover)
lg:focus:bg-size(cover)bg-position
Sets the background image position.
Syntax
bg-position(value)
bg-position[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | center top right bottom left |
Examples and generated CSS
bg-position(center)
bg-position[10%_20%].bg-position\(center\) {
background-position: center;
}
.bg-position\[10\%_20\%\] {
background-position: 10% 20%;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:bg-position(center)
hover:bg-position(center)
lg:focus:bg-position(center)