How to add a background image to the signature?

Scenario 

You are using Exclaimer cloud and would like to add a background image to the template of your signature design.

Resolution

Adding a background image involves: 

Checking the image size, then

Inserting the background image.

Checking the image size

To check the background image size:

1. Navigate to the folder where the image is saved, right-click on the image, and select Properties.
   Example:
   
2. In the Properties window, select the Details tab. You will see the size of the image under Dimensions.
   Example:
   
   
   
3. If the image is too big, you can use an image editor, such as Adobe Photoshop, Gimp, Paint.net and so on, to reduce the image down.
   
   NOTE: The recommended width for a background image is 600px wide.
   Once you know what the image size is, you can proceed to build the signature template.

Inserting the background image

To insert the background image into your signature template:

1. Drag the custom table onto the signature canvas.
   
   
   
2. Create a 1x1 table structure; this will allow you to upload a background image to start with.
   Example:
   
   
   
3. From the right-hand side properties pane, expand the Background section and upload the required custom image.
   
   
   
   WARNING! Using background images will render the signature as a bitmap - this is behaviour by design to ensure the image can be viewed by all mail clients and devices.
   A confirmation message is displayed: 
   
4. Click YES to proceed.
   
   
5. From the right-hand side properties pane, expand the Size section and set the  Height and Width of the image on the table.
   You will now see the image appear inside the table and in the design preview. 
   Example:
   
   Once the image is in place, you can layer on tables and elements to further construct your signature template and use padding and alignments to space the design further.
   
   In this example, a table of two columns with white text on the dark background of the image is displayed:
   
   
   
6. In the example, Padding is also added to the left of the inner table - this is to move it away from the edge of the background image.
   
   This may look odd when structuring the signature, but it is normal for this to occur. You can see in the preview how this looks.
   For example:
   
   
   
7. In this example, the inner table is aligned to be vertically centered and aligned left horizontally:
   
   
   
8. Padding is also used on the Green Line of the left-hand table cell to add space before the contact fields; this has been set to the right:
   
   
   This is the result, a nice clean and simple design:
   
   

   If your design is more complicated, use more table cells where needed, and don't be afraid to use padding to align the signature accordingly.