Skip to content
TeaCSS documentation

Backgrounds

Background colour, image, position, and repetition. TeaCSS Standard reference.

This is the Standard reference for backgrounds. It follows the authored TeaCSS vocabulary at source revision fa3709a for package version 0.7.1. Each value list gives finite examples and named values for its prefixes. A bracket or variable example demonstrates that open form for the same prefix; the listed arbitrary literals are samples, not every accepted literal. Check the Storybook token reference for more examples, and do not infer support from a different prefix.

background-color

Interactive example. Prefixes: bg-color. Example: bg-color:ink-100. It emits background-color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (482)

ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900, ink-950, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900, gray-950, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850, mauve-900, mauve-950, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800, slate-850, slate-900, slate-950, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700, sage-800, sage-850, sage-900, sage-950, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600, olive-700, olive-800, olive-850, olive-900, olive-950, sand-100, sand-150, sand-200, sand-300, sand-400, sand-500, sand-600, sand-700, sand-800, sand-850, sand-900, sand-950, tomato-100, tomato-150, tomato-200, tomato-300, tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950, red-100, red-150, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950, ruby-100, ruby-150, ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950, crimson-100, crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950, pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950, plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900, plum-950, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900, purple-950, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850, violet-900, violet-950, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800, iris-850, iris-900, iris-950, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700, indigo-800, indigo-850, indigo-900, indigo-950, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600, blue-700, blue-800, blue-850, blue-900, blue-950, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950, teal-100, teal-150, teal-200, teal-300, teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950, jade-100, jade-150, jade-200, jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950, green-100, green-150, green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950, grass-100, grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950, brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950, bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900, bronze-950, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900, gold-950, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850, sky-900, sky-950, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800, mint-850, mint-900, mint-950, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700, lime-800, lime-850, lime-900, lime-950, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600, yellow-700, yellow-800, yellow-850, yellow-900, yellow-950, amber-100, amber-150, amber-200, amber-300, amber-400, amber-500, amber-600, amber-700, amber-800, amber-850, amber-900, amber-950, orange-100, orange-150, orange-200, orange-300, orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950, primary-100, primary-150, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950, neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950, focused-100, focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950, success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950, warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900, warning-950, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900, failure-950, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850, general-900, general-950, transparent, current, black, white, [#abc], $color, $color|white, red-500/50, rgb(0,0,0), [lab(50%_40_59.5)], $color|rgb(0,0,0), current/50, $color/50, [#abc]/30

background-image

Interactive example. Prefixes: bg-image. Example: bg-image:none. It emits background-image:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (3)

none, [url(image.svg)], $image

background-position

Interactive example. Prefixes: bg-position. Example: bg-position:top. It emits background-position:top;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (22)

top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right, top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right, 50%, 10px, [25%_75%], $position

background-size

Interactive example. Prefixes: bg-size. Example: bg-size:auto. It emits background-size:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (7)

auto, cover, contain, 50%, 100px, [120px_60px], $size

background-repeat

Interactive example. Prefixes: bg-repeat. Example: bg-repeat:repeat. It emits background-repeat:repeat;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (8)

repeat, repeat-x, repeat-y, no-repeat, space, round, [repeat_space], $repeat

background-attachment

Interactive example. Prefixes: bg-attachment. Example: bg-attachment:fixed. It emits background-attachment:fixed;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (5)

fixed, local, scroll, [local], $attachment

background-origin

Interactive example. Prefixes: bg-origin. Example: bg-origin:border-box. It emits background-origin:border-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (5)

border-box, padding-box, content-box, [content-box], $origin

background-clip

Interactive example. Prefixes: bg-clip. Example: bg-clip:border-box. It emits background-clip:border-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (6)

border-box, padding-box, content-box, text, [content-box], $clip