Skip to main content

Mauris purus urna, dictum non cursus et, congue et felis. Suspendisse porttitor mi et eros luctus suscipit.

Read More
Open Search
Schedule a Call
Search for topics or resources
Enter your search below and hit enter or click the search icon.
Close Search
Schedule a Call
TRUST Documentation

Module Background Layers

Settings Walkthrough

Add one or more background layers here. Layers are overlaid on top of each other with the first layer in your list being the back and the last layer in your list being the front. After changing settings in this module group, click Apply to preview your changes.

Background Layers: Repeatable Group

Background Layer: Image

  • Device Visibility: Boolean (check to enable) - Use these inputs to show/hide this background layer for certain device sizes. When only showing this layer on certain screen sizes, ensure this layer is not necessary for your content to be legible.
    • Hide on Desktop
    • Hide on Laptop
    • Hide on Tablet
    • Hide on Mobile
  • Background Opacity: Number Input - Use this module to adjust this background layer's opacity (transparency). 100 is solid and 0 is completely transparent.
  • Background: Image: Image
  • Background: Image Size: Single Choice: Scale to Fill, Scale to Fit, Scale to Fit Height, Scale to Fit Width, Stretch to Fill, Native Size (use image's native height and width)
  • Background: Image Repeat: Single Choice: Repeat, Repeat Vertical, Repeat Horizontal, No Repeat
  • Background: Image Horizontal Alignment: Single Choice: Left, Left-Center, Center, Right-Center, Right
  • Background: Image Vertical Alignment: Single Choice: Top, Top-Center, Center, Bottom-Center, Bottom
  • Background: Image Parallax / Fixed When Scrolling: Boolean (check to enable) - Enable this to make your image fixed so it does not scroll with the rest of the page (similar to a parallax effect but unlike a parallax the image will not move at all). This is useful when you need to use one background image across consecutive sections or your section changes height during use.
  • Background: Offset Group
    • Background: Left Offset Percentage: Number Input
    • Background: Right Offset Percentage: Number Input
    • Background: Top Offset Percentage: Number Input
    • Background: Bottom Offset Percentage: Number Input

Background Layer: Color

  • Device Visibility: Boolean (check to enable) - Use these inputs to show/hide this background layer for certain device sizes. When only showing this layer on certain screen sizes, ensure this layer is not necessary for your content to be legible.
    • Hide on Desktop
    • Hide on Laptop
    • Hide on Tablet
    • Hide on Mobile
  • Background Opacity: Number Input - Use this module to adjust this background layer's opacity (transparency). 100 is solid and 0 is completely transparent.
  • Background: Color: Single Choice: Primary, Secondary, Black, Dark Grey, Grey, Light Grey, White, Custom
  • If you select Custom the following inputs will show: 
    • Background: Custom Color: Numerical Hex Code Input, Opacity Percentage, and Color Picker - The opacity for this module is intended to be 100%, otherwise your color will display lighter than intended.
  • Background: Offset Group
    • Background: Left Offset Percentage: Number Input
    • Background: Right Offset Percentage: Number Input
    • Background: Top Offset Percentage: Number Input
    • Background: Bottom Offset Percentage: Number Input

Background Layer: Gradient

  • Device Visibility: Boolean (check to enable) - Use these inputs to show/hide this background layer for certain device sizes. When only showing this layer on certain screen sizes, ensure this layer is not necessary for your content to be legible.
    • Hide on Desktop
    • Hide on Laptop
    • Hide on Tablet
    • Hide on Mobile
  • Background Opacity: Number Input - Use this module to adjust this background layer's opacity (transparency). 100 is solid and 0 is completely transparent.
  • Background: Gradient Type: Single Choice: Linear, Radial (Inside to Outside)
  • Based on your selection for Background: Gradient Type, the following inputs will show.
    • Background: Linear Gradient Directions: Single Choice: Top to Bottom, Top-Left to Bottom-Right, Left to Right, Bottom-Left to Top-Right, Bottom to Top, Bottom-Right to Top-Left, Right to Left, Top-Right to Bottom-Left
  • Background: Gradient Start Color: Single Choice: Primary, Secondary, Black, Dark Grey, Grey, Light Grey, White, Custom
  • Based on your selection for Background: Gradient Type, the following inputs will show.
    • Background: Gradient Custom Start Color: Single Choice: Top to Bottom, Top-Left to Bottom-Right, Left to Right, Bottom-Left to Top-Right, Bottom to Top, Bottom-Right to Top-Left, Right to Left, Top-Right to Bottom-Left
  • Background Gradient: Start Color Position: Number Input - This number determines where the start color will be positioned in the gradient. This number must be less than the value of your gradient end color, otherwise it may cause issues with the direction of your gradient. (Default: 0)
  • Background: Gradient End Color: Single Choice: Primary, Secondary, Black, Dark Grey, Grey, Light Grey, White, Custom
  • Based on your selection for Background: Gradient Type, the following inputs will show.
    • Background: Gradient Custom End Color: Single Choice: Top to Bottom, Top-Left to Bottom-Right, Left to Right, Bottom-Left to Top-Right, Bottom to Top, Bottom-Right to Top-Left, Right to Left, Top-Right to Bottom-Left
  • Background Gradient: Start End Position: Number Input - This number determines where the start color will be positioned in the gradient. This number must be less than the value of your gradient end color, otherwise it may cause issues with the direction of your gradient. (Default: 100)
  • Background: Offset Group
    • Background: Left Offset Percentage: Number Input
    • Background: Right Offset Percentage: Number Input
    • Background: Top Offset Percentage: Number Input
    • Background: Bottom Offset Percentage: Number Input

Background Layer: Video

  • Device Visibility: Boolean (check to enable) - Use these inputs to show/hide this background layer for certain device sizes. When only showing this layer on certain screen sizes, ensure this layer is not necessary for your content to be legible.
    • Hide on Desktop
    • Hide on Laptop
    • Hide on Tablet
    • Hide on Mobile
  • Background Opacity: Number Input - Use this module to adjust this background layer's opacity (transparency). 100 is solid and 0 is completely transparent.
  • Background: Url of Video File (MP4): Single Choice: External, File
    • URL: Input URL or Select Page
  • Background: Fallback Background Image: Image - IMPORTANT: The height and width attributes of this image must match the size or aspect ratio of the video, otherwise your video may not be positioned properly. For best appearance, this image should usually be identical to the first frame of your video.
  • Background: Offset Group
    • Background: Left Offset Percentage: Number Input
    • Background: Right Offset Percentage: Number Input
    • Background: Top Offset Percentage: Number Input
    • Background: Bottom Offset Percentage: Number Input

Background Layer: Swoop/Angle

  • Device Visibility: Boolean (check to enable) - Use these inputs to show/hide this background layer for certain device sizes. When only showing this layer on certain screen sizes, ensure this layer is not necessary for your content to be legible.
    • Hide on Desktop
    • Hide on Laptop
    • Hide on Tablet
    • Hide on Mobile
  • Swoop Orientation: Single Choice: Top, Bottom
  • Swoop Color: Single Choice: Light Grey, White, Custom
  • If you select Custom the following inputs will show: 
    • Background: Custom Color: Numerical Hex Code Input, Opacity Percentage, and Color Picker - The opacity for this module is intended to be 100%, otherwise your color will display lighter than intended.

Development Notes

Reserved block class:

.background

.background--layer

Resources:

Macro for Background Layers

/css/mixins/_snippets.css

CSS for Background Layers

/css/base/_base.css