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. Ronin includes 4 background blocks.

Background color​

block-bg-color.webp

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

Settings:

  • Type: Color or Gradient.
  • Background color: A color from the current scheme (Default, Primary, Secondary, Tertiary, Background, Button background, Button background inverse, Layer, Error, Warning), Transparent, or Custom.
  • Background color opacity: Fade a scheme color from 5% to 100%.
  • Custom background color: A color picker, 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​

block-bg-image.webp

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

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 cropped to cover the container, so pick an image whose focal point works at both wide and tall sizes.

Background video​

block-bg-video.webp

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

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 with a semi-transparent color or a gradient if you need to darken the video so text stays readable.

Parallax​

block-parallax.webp

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.

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.
  • Parallax settings: A Start value and End value for each of three movements:
    • X axis: The horizontal travel as the block scrolls through the viewport.
    • Y axis: The vertical travel.
    • Scale: 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.