@bolt/components-background

An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.

Usage no npm install needed!

<script type="module">
  import boltComponentsBackground from 'https://cdn.skypack.dev/@bolt/components-background';
</script>

README

Background can be added to any container. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-background

Description

Background allows Bolt to set an image inside of bands.

  • Can set an image inside the band
  • Can set background shapes
  • Can set focus on the left
  • Can set focus on the right
  • Can set light, medium, or heavy opacity
  • Can set a left, right, or center gradient

We recommend a max-width of 2880px for full-bleed background images. This recommendation takes into consideration the common HD screen resolution of 1920x1080 and multiplies 1920 by 1.5.