☰ Sign in

Exclaimer Knowledge Base > Signature Design > On-Premise Products

🔍 Search

Articles in this section ▾

How to create Background images within

an email signature
Michael Sutcliffe
👤 4 months ago · Updated

Follow

Relevant Products: Signature Manager Exchange Edition | Signature Manager Outlook

Edition
Feedback

Note: This article uses advanced HTML and you should have a basic understanding of
HTML before proceeding


 

Scenario

You are looking to create a banner within your signature template that has clickable
locations or dynamic data overlaid on a background image.

How To

Warning: Before proceeding to use this method, please note that the images MUST be
web hosted.

As well as the images being Web Hosted, they must be uploaded at the exact size that
your signature is going to be. For example: 600px by 100px.
Support
 
 Part 1 - Inserting the background image
Part 2 - Creating the signature

Part 1 - Inserting the background image

1. To begin creating this design, you will need to insert the following code into your
signature where ever you require this to display. You will need to enter this information
in the Source tab.

<!-- BEGIN : CTA / Background image -->

<TABLE role=presentation style="WIDTH:;" cellSpacing=0
cellPadding=0 width= bgColor=#303e3d border=0>
<TBODY>
<TR>
<TD style="BACKGROUND: url(INSERT WEB LINK) no-repeat; background-
size: contain" bgColor=#303e3d vAlign=middle background="INSERT WEB
LINK" align=center>
<!--[if gte mso 9]>
<img src="INSERT WEB LINK" alt="" border="0" width="" height=""
style="display:block;" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
stroke="false" style="width:; height:; position:absolute; top:0;
left:0; border: 0; z-index: 2">
<v:fill color="#ffffff" opacity="0%" style="z-index: 1;" />
<div>
Feedback

<![endif]-->
<!-- Containing Table START-->


<!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->
</TD>
</TR>
</TBODY>
</TABLE>
<!-- END : CTA / Background image -->

2. Once the code has been added to your signature template, within the Source tab
you will need to update three locations with the "Web Hosted Image URL" of your
background image. Locate "INSERT WEB LINK"

Support
 3. After adding the image URL to your source code, locate the Width & Height inputs in
the source view. Once you have located these, you will need to insert the image
dimensions to the exact size that the image is.
Feedback


 4. Finally, locate the "bgColor" within the code and set this to a background colour
similar to your background image. This simply acts as a "fallback" should the
background image not display.

Support
Part 2 - Creating the signature
 1. Locate <!-- Containing Table Start --> and <!-- Containing Table End --> and create a
new HTML Table with the required number of Rows and Columns

2. Insert the required fields, information and links into your signature. Apply any styles to
the fields, information and links as required.

3. Finally, located the TD tag that contain the "BACKGROUND" and on the "Style" add
some additional padding to ensure there is some spacing around the content of your
signature template.
Feedback






Was this article helpful?

✓ Yes ✕ No

0 out of 0 found this helpful

Have more questions? Submit a request

Return to top ⬆ Support

 Related articles

Using Background Images in Exclaimer Cloud

The images in my signature are not displayed in my emails

Images in the email signature are not displayed when the email is received

How to use Standard HTML Tables

Updating Images in Conditional Fields

Exclaimer Knowledge Base

Feedback




Support