Background

bgには文字列またはオブジェクトを指定できます。

文字列指定の場合
- backgroundにそのまま出力されます。
- ユーティリティクラス化できる文字列の場合は、.-bg:{utility}が出力されます。
オブジェクト指定のときは、それぞれ対応するbackgroundプロパティとして出力されます。
- image → background-image
- size → background-size,
- repeat
- position
- color
- attachment
- blendMode
- clip
- origin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑

<Frame aspect='16/9' bg="url(/img/demo-img.jpeg) center / 50%">
	<Layer bgc="white:50%" position="center" size="contain" w="40rem" p="box">
		<DammyText />
	</Layer>
</Frame>
<Frame aspect='16/9' bg={{image: 'url(/img/demo-img.jpeg)', size: '50%', position: 'center'}}>
	<Layer bgc="white:50%" position="center" size="contain" w="40rem" p="box">
		<DammyText />
	</Layer>
</Frame>

Utility

grid, stripe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑

<Box bg='grid' p='box:l'>
	<DammyText />
</Box>
<Box bg='stripe' p='box:l'>
	<DammyText />
</Box>

grid, stripe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑

<Box bg='grid' p='box:l' bgc='black:10%'>
	<DammyText />
</Box>
<Box bg='stripe' p='box:l' bgc='blue:10%'>
	<DammyText />
</Box>

Glass

glass

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑

<Frame aspect='16/9'>
	<Media
		src='https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80'
		alt='' width='960' height='640'
	/>
	<Layer p={20} bg='glass' inset={0}>
		<Center p='box' size='cover' bg='glass' c='white' radius={2} shadow={2}>
			<DammyText />
		</Center>
	</Layer>
</Frame>
<Frame aspect='16/9'>
	<Media
		src='https://images.unsplash.com/photo-1501949997128-2fdb9f6428f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80'
		alt='' width='960' height='640'
	/>
	<Layer p={20} inset={0}>
		<Center p='box' size='cover' bg='glass' c='black' radius={5} shadow={4}>
			<DammyText />
		</Center>
	</Layer>
</Frame>

Grid Props Border