Background Image Layer

The Background Image places an image on the page that spans the entire width of the browser. The main purpose of this component is to provide a full browser width visual background on the page as components can be placed over the image.

Example

Most components can be used to overlay the Background Image Layer, like this Rich Text Editor within the Shaded Box Container.

Use Cases

Promotional Landing Page

Authoring, Requirements and Specifications

Options

Authors will be able to set the component configurations for each breakpoint independently

  • Image: a different image can be selected to be displayed on smaller screens to provide an optimized image for each breakpoint/screen size
    • The image can be hidden at the lower breakpoints
  • Image Alignment: determines alignment of the image relative to the component container (if the image is larger than the container)
    • Horizontal: Left, Right, Center
    • Vertical: Top, Bottom, Center
  • Image Height: sets the height of the component area in which the image and the overlaid components are contained. This is an important setting to ensure the overlaid components do not run into components below the Background Image at smaller screen sizes. 


Required Fields

  • Large sceens/ desktop: all fields are required
  • Mid-size screens / Tablet: Image Height is required
    • the large screen image will be used if Hide Image is not checked or an image is not specified
    • if an image is specified, the Horizontal and Vertical Alignment is required
  • Small screens / Mobile: same as mid-size screens


Images

  • File types: .jpg and .png only
  • Required Images: only an image for larger screen sizes is required
    • If an image is not specified or hidden at the lower breakpoints, the image selected for large screens will be used.
  • Image Size: maximum size is 1920px x 1080px
    • the image does not scale so it will be cut off if it is larger than the container (browser width and height)
    • to ensure the image fills the browser, the image width must be at least the width of the browser at the different breakpoints
  • Image Composition: images should be relatively simple so it does not distract from the page content or make it difficult to read the page copy

Authoring Notes

  • Layout Options: should not be used within the Column Control component


Similar Components

  • Use the Full Width Image component when the image serves as a main piece of content intended to catch the user's attentention. The Full Width Image component does not span the entire width of the browser with limited options for content to overlay the image. 
  • Use the Image component when content does not need to overlay the image or the image does not to span the width of the browser.