Adding a Background Image to Your Header

Overview

This tutorial offers clear, easy steps to add a background image to your header component, visually elevating your Header's design.

Result

Steps

Create the screen flow

Type Flow in the setup menu

• Click on the "New Flow" button to create a new flow

• Select "Screen Flow"

Add a Screen Element

• Drag a screen element with the following settings:

  • Enter a Screen API Name

  • Remove the Screen Header and Footer (if needed)

Add the Header Component

• Drag the Header Component from the custom list (or type Avatar Group from the search box)

• Enter an API Name

• Open the Component Builder to access all the component's settings

• Set the following settings:

  • Title: Header Background image

  • Background image: upload your background image here

  • Is Joined: True

  • Pull to Boundary: True