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, much like the operator flag (@) does

Configuring Background Attributes

Property	Expected Values	Example
bg-size	cover,contain	bg-attr:cover
bg-repeat	no-repeat, repeat-x, repeat-y, repeat, space, round, initial, revert, unset, revert-layer	bg-attr:no-repeat
bg-position	left-top, left-center, left-bottom, center-top, center, center-bottom, right-top, right-center, right-bottom	bg-attr:center
bg-attach	scroll, fixed, local	bg-attr:fixed
bg-clip	border, content, padding, text	bg-attr:content
bg-origin	border, content, padding	bg-attr:border