Enable adding a background image to a rendering

Current version: 10.4

To further enhance the design of your pages, in SXA you can add a background image to any rendering. Before you can add a background image, you must add the _Background Image template to the rendering.

To add the  _Background Image template to the rendering:

  1. In the Content Editor, navigate to the rendering template (Templates/Features/Experience Accelerator).

  2. In the Data section, add the _Background Image template (Templates/Foundation/Experience Accelerator/Presentation).

    Add the background image template to the rendering.

  3. In the Experience Editor, if you now add the rendering, you can see that the Assign Background Image button is available in the toolbar. Click the icon to select the image.

    Assign background image option available in the Experience Editor.

  4. In the Data section, in the Background Image field, click Browse to select the image from the Media Libary.

    Browse for the image to use as a background.

  5. In the Stretch Mode field, you can select one of the following options:

    • Fixed background

    • Parallax

    • Stretch

    • Stretch vertically and tile horizontally

    • Tile

    • Tile vertically and tile horizontally

Do you have some feedback for us?

If you have suggestions for improving this article,