Configuring the Background Image

You can set a custom background image for the portal and control how it is displayed. The Background settings are available under the Branding & Identity section in the theme workspace and are applied globally across all portal pages. Changes are reflected simultaneously in the live preview while you work.

The Background section also includes a Component opacity setting that applies to all components displayed over the background image.

To configure the background image:

1. In the Navigation Menu, browse to Publishing > Themes.

2. On the Themes page, navigate to the Custom Themes section and select the Edit button next to the theme you want to customize.

3. In the Themes workspace, navigate to Global > Branding & Identity > Background and select the Expand button.

4. Enable the Use background image toggle to activate background image settings.

   When the toggle is off, the background image settings described below are not displayed.

5. Select the mode for which you want to configure the background image:

   • Light: Configures the background image displayed when the portal is in light mode.
   • Dark: Configures the background image displayed when the portal is in dark mode.

6. Upload an image using one of the following methods:

   • Drag and drop: Drag your image file into the upload area and drop it to upload.
   • Browse: Select the Browse button to open a file picker and select an image from your device.
   • Image URL: Enter a direct URL to the image in the Enter image URL field and select the arrow button to apply it.

   Supported file formats are SVG, PNG, and JPG. The maximum file size is 2 MB.

7. From the Image position dropdown, select the position of the background image on the portal. The available options are:

   • Top left
   • Top center
   • Top right
   • Center left
   • Center center
   • Center right
   • Bottom left
   • Bottom center
   • Bottom right
   • Custom

8. From the Image scale dropdown, select how the background image is scaled within the portal. The available options are:

   • Fill: Scales the image to fill the entire portal area, which may crop the image.
   • Fit: Scales the image to fit within the portal area while preserving its aspect ratio.
   • Original size: Displays the image at its original dimensions without scaling.
   • Custom: Allows you to set custom width and height values for the image.

9. From the Scroll behavior dropdown, select how the background image behaves when the page is scrolled. The available options are:

   • Scroll: The background image scrolls with the page content.
   • Fixed: The background image remains fixed in place while the page content scrolls over it.

10. Use the Component opacity slider to set the opacity level for components displayed over the background image. You can also enter a value directly in the opacity field. Select the Reset icon to restore the default opacity value.

11. Select the Save button to retain your changes.

12. Select Publish to make the updated theme available on the portal.