Background color and/or image

In any type of template, boxes, tables and table cells can have a background color and/or a background image.

To select a background image or color:

  1. Right-click the element and select the respective element on the shortcut menu.

    Alternatively, select the element (see Selecting an element; note that a Box is a <div> element) and on the Format menu click the respective element.

  2. Click the Background tab.

Note: Print section backgrounds are set differently. See Using a PDF file or other image as background.

To define a background color:

Click the downward pointing arrow next to Color to select a color from the list of predefined colors (see Background color and/or image).
Alternatively, click the small rectangle to the right of the color list to open the Color Picker dialog. In this dialog you can select a color from the color wheel. You can also choose the color mode: RGB or CMYK. For an explanation of these two modes, see Background color and/or image; for an explanation of the other options in this dialog, see Color Picker.
You could also type a name or value in the Color field directly. It must be a valid color name (CSS color names), a hexadecimal color code (see w3school's color picker), RGB color value, for example rgb(216,255,170) or CMYK color value, for example cmyk(15%, 0%, 33%, 0%).

To select a background image:

  1. Click the Select Image button.

  2. Click Resources, Disk or Url, depending on where the image is located.

    • Resources lists the images that are present in the Images folder on the Resources pane.

    • Disk lists image files that reside in a folder on a hard drive that is accessible from your computer. Click the Browse button to select a folder (or an image in a folder).
      As an alternative it is possible to enter the path manually. The complete syntax is: file://<host>/<path>.

      Note: If the host is "localhost", it can be omitted, resulting in file:///<path>, for example: file:///c:/resources/images/image.jpg.

    • Url lists image files from a specific web address. Select the protocol (http or https), and then enter a web address (for example, http://www.mysite.com/images/image.jpg).

  3. With an external image, you can check the option Save with template. If this option is checked, the file will be inserted in the Images folder on the Resources pane.

    If not saved with the template, the image will remain external. Note that external images need to be available when the template is merged with a record set to generate output, and that their location should be accessible from the machine on which the template's output is produced. External images are updated (retrieved) at the time the output is generated.

  4. Select an image from the list.

  5. If the image is contained in a PDF file that consists of more than one page, select the desired page.

  6. Click OK.

  7. Set the size of the image. The options are explained here: MDN Web Docs - background-size.

  8. Set the position of the image in the element.

  9. Finally, click OK.

Note: It is also possible to set an element's background in a style sheet; see Styling templates with CSS files. When referring to images or fonts from a CSS file, refer to a path that is relative to the current path, which is css/. For example: #header { background-image: url('../images/image.jpg'); }.