Skip to content

Background Origin

Set background positioning origin

Syntax

visual="bg-origin:[value]"

Values

ValueCSS OutputDescription
borderbackground-origin: border-boxOrigin at border
paddingbackground-origin: padding-boxOrigin at padding
contentbackground-origin: content-boxOrigin at content

Examples

html
<div visual="bg-origin:content">Content origin</div>

Preview

Background Origin

visual="bg-origin:content" - Set background positioning origin

border
padding
content
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">border</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">padding</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
</div>