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 select a background color: click the downward pointing arrow next to Color to select a color from the list of predefined colors (see Defining colors, spot colors and tints), or click the colored rectangle to open the Color Picker dialog; see Color Picker. In this dialog you can select a color from the color wheel or using the eye dropper tool, set RGB or CMYK color values or enter a hexadecimal color code.

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: http://www.w3schools.com/cssref/css3_pr_background-size.asp.
  8. Set the position of the image in the box.
  9. Finally, click OK.

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'); }.

 
  • Last Topic Update: 24/01/2017 09:32
  • Last Published: 7/6/2017 : 9:49 AM