Skip to main navigationSkip to main content
Return to Sky UI homepage

system - background

Applying the background system modifier to your component will allow consumers of your component to pass in the following props:

PropTypeDefaultDescription
$bgColorcolorsundefinedApplies a background color
$bgGradientgradientsundefinedApplies a background image gradient
$bgImagestringundefinedSets a background image URL or data source.
$bgPositionstringundefinedDefines the position of the background image.
$bgSizestringundefinedSpecifies how the background image is sized.
$bgAttachmentstringundefinedSets how the background image behaves when scrolling.
$bgRepeatstringundefinedDefines if and how the background image repeats.
$bgClipstringundefinedSpecifies how the background extends within the element.
$bgOriginstringundefinedDetermines the origin position of the background image.
$bgBlendModestringundefinedDefines how the background image blends with the element's background color.
background | Sky UI Design System