Enable adding a background image to a rendering

Abstract

Add the Background image template to display the Assign Background Image button.

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).

    SXA-background-image-template.png
  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.

    SXA-background-image-assign.png
  4. In the Data section, in the Background Image field, click Browse to select the image from the Media Libary.

    SXA-background-image-data.PNG
  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