Background Position

Set background position

Syntax

visual="bg-pos:[value]"

Values

Value	CSS Output	Description
center	background-position: center	Center position
top	background-position: top	Top position
bottom	background-position: bottom	Bottom position
left	background-position: left	Left position
right	background-position: right	Right position
top-left	background-position: top left	Top left
top-right	background-position: top right	Top right
bottom-left	background-position: bottom left	Bottom left
bottom-right	background-position: bottom right	Bottom right

Examples

<div visual="bg-pos:center">Centered background</div>

Preview

Background Position

visual="bg-pos:center" - Position background image

center

top

bottom

View Code

<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">center</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="background:[custom-value]">Custom</div>