Backgrounds

Elevate CSS features three compound properties for setting or configuring the background of an element: bg-img, bg-color, and bg-attr. bg-img and bg-color are fairly self explainatory while bg-attr is a more advanced property that can be used to configure the characteristics of the background of an element.

Setting Backgrounds

Property	Expected Values	Example
bg-img	PassThroughToken (e.g., (url(https://example.com/image.jpg)) )	bg-img:(url(https://example.com/image.jpg))
bg-color	ColorToken (e.g., purple+1)	bg-color:purple+1
bg-exact	PassThroughToken (e.g., (50%_auto) )	bg-exact:(50%_auto)

'Pass Through' Means Literally

When using PassThroughToken based properties or using it in your own custom syntax, remember that the actual CSS value is whatever you pass through. So, if you’re using a PassThroughToken for a background image, for example, you must use the url() syntax just as you would in a CSS declaration. PassThroughTokens also allow you to write spaces in your utility strings by placing an underscore (_) in place of the space.

Configuring Background Attributes

Use bg-attr with one of the following modifiers:

Modifier	Expected Values	Example
Size	cover,contain	bg-attr:cover
Repeat	no-repeat, repeat-x, repeat-y, repeat, space, round, initial, revert, unset, revert-layer	bg-attr:no-repeat
Position	left-top, left-center, left-bottom, center-top, center, center-bottom, right-top, right-center, right-bottom	bg-attr:center
Attachment	scroll, fixed, local	bg-attr:fixed
Clip	border, content, padding, text	bg-attr:content
Origin	border, content, padding	bg-attr:border