Skip to main content

Background Blocks

Background blocks paint the backdrop of the container they sit in. Drop one inside a Section, a Group, or a Layout item and it stretches to fill that container behind its other blocks, so you can layer a color, an image, or a video under any content without changing the container's own Appearance settings. Lotio includes 4 background blocks.

Background color​

The Background color block fills its parent with a solid color or a gradient.

Background color block

Settings:

  • Type: Color or Gradient.
  • Background color: A color from the current scheme (Primary, Secondary, Tertiary, Background, Button background, Layer, Error, Warning, and more), Transparent, or Custom.
  • Background color opacity: Fade a scheme color from 5% to 100%.
  • Custom background color: A color picker with alpha, shown when the color is set to Custom.
  • Background gradient: A gradient editor, shown when the type is Gradient.
  • Background blur: Blur whatever sits behind the block (0-50), useful for frosted-glass panels over an image.

Background image​

The Background image block covers its parent with an image, with a separate image for mobile and an optional parallax scroll.

Background image block

Settings:

  • Device: Switch between the desktop and mobile image pickers.
  • Background image desktop: The image shown on desktop screens.
  • Background image mobile: An alternate image for mobile screens; leave it empty to reuse the desktop image.
  • Use parallax: Move the image slightly slower than the page as the visitor scrolls.

The image is lazy-loaded and cropped to cover the container, so pick an image whose focal point works at both wide and tall sizes.

Background video​

The Background video block plays a muted, looping video behind the parent's content.

Background video block

Settings:

  • Video type: Video (Shopify-hosted) or Video URL.
  • Video: Select a video from your store's media library.
  • Video URL: A video link (for example YouTube or Vimeo), shown when the type is Video URL.
  • Use parallax: Scroll the video at a slower rate than the page.
note

Background videos play automatically without sound and without controls. Add a Background color block above it with a transparent color or a gradient if you need to darken the video so text stays readable.

Parallax​

The Parallax block is a floating container that moves and scales its child blocks as the page scrolls, so you can build layered, depth-like compositions.

Parallax block

Unlike the other background blocks, Parallax accepts theme blocks and app blocks as children. Add an Image, Text, Icon, or any other block inside it, then position the layer inside its parent and set how far it travels.

Settings:

  • Device: Edit the desktop or mobile values. On mobile, Inherit desktop value reuses the desktop values until you turn it off.
  • Parallax position: Top and Left offsets and the Width of the layer inside its parent.
  • X axis: Start value and End value for the horizontal travel as the block scrolls through the viewport.
  • Y axis: Start value and End value for the vertical travel.
  • Scale: Start value and End value for the size of the layer (1 is the natural size).
tip

Stack several Parallax blocks with different X, Y, and Scale ranges inside one Group to create a multi-layer scene. Keep the ranges small on mobile, where the viewport is short and large movements can push content off screen.