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 box and click Box on the shortcut menu.
2. Alternatively, select the box (see Selecting an element; note that a Box is a <div> element) and on the Format menu click Box.
3. Click the Background tab.

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 (see color names on w3schools), 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: https://www.w3schools.com/cssref/css3_pr_background-size.asp.
8. Set the position of the image in the box.
9. Finally, click OK.