Background Image Not Displaying in Outlook Emails Using ServiceNow Email Layout – Need Help

karishmas749252
Tera Contributor

yesterday

Hi All,
I am working on a custom HTML Email Layout in ServiceNow. The layout contains a header image, notification body, and footer image.

My requirement is to display the footer image as a background, with a description and a clickable SharePoint hyperlink positioned directly on top of the image.

The layout works as expected in the browser/email preview. However, when the notification email is received in Microsoft Outlook, the footer background image is not displayed. The footer text and hyperlink are visible, but the background image is missing.
 I have written this code in email Layout :

<style type="text/css">

* {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

body {

margin: 0 !important;

padding: 0 !important;

width: 100% !important;

font-family: Lato, Arial, sans-serif;

background-color: #F5F6F7;

}

table, td {

border-spacing: 0 !important;

border-collapse: collapse !important;

mso-table-lspace: 0pt !important;

mso-table-rspace: 0pt !important;

}

img {

display: block;

border: 0;

outline: none;

text-decoration: none;

max-width: 100%;

height: auto;

}

a {

text-decoration: none;

}

.email-container {

width: 100%;

max-width: 650px;

}

.main-content {

padding: 35px 24px;

background-color: #FFFFFF;

text-align: left;

}

.footer-text {

font-family: Arial, sans-serif;

font-size: 13px;

line-height: 22px;

color: #FFFFFF;

}

.footer-link {

color: #4FC3F7;

text-decoration: none;

}

#snc_notification_unsubscribe,

#snc_notification_preference {

color: #1955BE;

font-size: 12px;

line-height: 18px;

}

@media only screen and (max-width: 600px) {

.email-container {

width: 100% !important;

}

.main-content {

padding: 28px 16px !important;

}

.footer-content {

padding: 30px 16px !important;

}

}
</style>

<!-- HEADER -->
<table role="presentation" width="100%" cellspacing="0"

cellpadding="0" border="0"

style="width:100%; background-color:#F5F6F7;">
<tr>
<td align="center">
<table role="presentation" width="100%" cellspacing="0"

cellpadding="0" border="0"

class="email-container"

style="width:100%; max-width:650px;

background-color:#032D42;">
<tr>
<td>
<img src="request_completed_header.png"

alt="Global Travel Services"

width="650"

style="display:block; width:100%;

max-width:650px; height:auto;

border:0;" />
</td>
</tr>
</table>
</td>
</tr>
</table>

<!-- BODY -->
<table role="presentation" width="100%" cellspacing="0"

cellpadding="0" border="0"

style="width:100%; background-color:#FFFFFF;">
<tr>
<td align="center" style="padding:0 12px;">
<table role="presentation" width="100%" cellspacing="0"

cellpadding="0" border="0"

class="email-container"

style="width:100%; max-width:650px;

background-color:#FFFFFF;">
<!-- tr>
<td height="55"

style="height:55px; background-color:#032D42;

font-size:0; line-height:0;">
&#160;
</td>
</tr-->

<tr>
<td class="main-content"

style="padding:35px 24px;

background-color:#FFFFFF;

text-align:left;">

${notification:body}

</td>
</tr>
</table>
</td>
</tr>

<tr>
<td height="20"

style="height:20px; font-size:0; line-height:0;">
&#160;
</td>
</tr>
</table>

<!-- UNSUBSCRIBE / PREFERENCES -->
<table role="presentation" width="100%" cellspacing="0"

cellpadding="0" border="0"

style="width:100%; background-color:#F5F6F7;">
<tr>
<td align="center"

style="padding:18px 10px 22px;

font-family:Arial,sans-serif;

font-size:12px; line-height:18px;">

${NOTIF_UNSUB} | ${NOTIF_PREFS}

</td>
</tr>
</table>

<!-- FOOTER -->
<table role="presentation" width="100%" cellspacing="0"

cellpadding="0" border="0"

style="width:100%; background-color:#F5F6F7;">
<tr>
<td align="center" style="padding:0 12px;">

<table role="presentation" width="100%"

cellspacing="0" cellpadding="0" border="0"

style="width:100%; max-width:650px;

background-color:#002B45;">
<tr>
<td align="center"

valign="middle"

background="request_completed_footer_01.png"

bgcolor="#002B45"

height="250"

class="footer-content"

style="height:250px;

background-color:#002B45;

background-image:url('request_completed_footer_01.png');

background-repeat:no-repeat;

background-position:center center;

background-size:100% 100%;

padding:35px 24px;">

<table role="presentation" width="100%"

cellspacing="0" cellpadding="0"

border="0"

style="width:100%; max-width:560px;">
<tr>
<td align="center"

class="footer-text"

style="color:#FFFFFF;

font-family:Arial,sans-serif;

font-size:13px;

line-height:22px;">

<strong>

If your query relates to immediate

travel, please contact the travel

management company. Out-of-hours

numbers for ATPI can be found on

your travel itinerary or by

accessing the Travel Hub via our

intranet page. You can also use

the chat function on the ATPI

On the Go app.
</strong>

<br /><br />

<a href="Link"

class="footer-link"

style="color:#4FC3F7;

text-decoration:none;">

Global Travel Services - Organization Home
</a>

<br /><br />

</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>

Can help on this how to fix this.

Thanks,
karishma.

0 Helpfuls
  • 94 Views
1 REPLY 1

sachinvic
Giga Guru

24m ago - last edited 19m ago

Hi Karishma,

Looking at your HTML, I believe the issue is related to Outlook's handling of CSS background images rather than the ServiceNow Email Layout itself.

 

You can try either of the following approaches, depending on whether the text and hyperlink must appear directly over the footer image.

Option 1: Use a standard HTML image (simplest approach)

If the footer design allows the image to appear above or below the text, I would recommend using a standard <img> element instead of CSS background-image.

Steps:

  1. Open your Email Layout under System Policy > Email > Layouts.

  2. Locate the existing footer section in the HTML.

  3. Remove the background-image, background-size, and background-position properties.

  4. Insert the footer image using an HTML <img> element.

  5. Use an absolute HTTPS URL for the image.

  6. Add the description and hyperlink in a separate table row below the image.

Example:

<table role="presentation" width="100%"
       cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <img src="https://your-domain.com/footer.png"
           width="650"
           alt="Footer"
           style="display:block;width:100%;
                  max-width:650px;height:auto;border:0;">
    </td>
  </tr>
  <tr>
    <td align="center" bgcolor="#002B45"
        style="padding:20px;color:#FFFFFF;
               font-family:Arial,sans-serif;">
      Your footer text goes here.
      <br><br>
      <a href="https://your-link.com"
         style="color:#4FC3F7;text-decoration:none;">
        Global Travel Services - Organization Home
      </a>
    </td>
  </tr>
</table>

 

This approach is generally more reliable because the image is embedded as a normal HTML element rather than a CSS background.

 

Option 2: Use VML for Outlook (when text must overlay the image)

If the requirement is to display the description and hyperlink directly over the footer background image, use VML as an Outlook-specific fallback.

Classic Outlook for Windows has limited support for CSS background images. VML allows the background image to be rendered in that environment.

Steps:

  1. Keep your existing HTML/CSS implementation for other email clients.

  2. Replace the existing footer table with the code below.

  3. Replace the sample image URL with the actual HTTPS image URL.

  4. Retain the same image dimensions as the original design.

  5. Keep a fallback background colour in case the email client blocks images.

Example:

<table role="presentation" width="100%"
       cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#002B45"
        style="background-color:#002B45;
               background-image:url('https://your-domain.com/footer.png');
               background-position:center;
               background-repeat:no-repeat;
               background-size:cover;">

      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
              fill="true" stroke="false"
              style="width:650px;height:250px;">
        <v:fill type="frame"
                src="https://your-domain.com/footer.png"
                color="#002B45"/>
        <v:textbox inset="0,0,0,0">
      <![endif]-->

      <table role="presentation" width="100%"
             cellpadding="0" cellspacing="0" border="0"
             style="width:100%;height:250px;">
        <tr>
          <td align="center" valign="middle"
              style="padding:25px;
                     font-family:Arial,sans-serif;
                     font-size:13px;
                     line-height:22px;
                     color:#FFFFFF;">

            Your footer description goes here.

            <br><br>

            <a href="https://your-link.com"
               style="color:#4FC3F7;text-decoration:none;">
              Global Travel Services - Organization Home
            </a>

          </td>
        </tr>
      </table>

      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->

    </td>
  </tr>
</table>

The VML dimensions (650px × 250px) should match your intended footer dimensions. If the text content changes dynamically, test the layout carefully because fixed-height backgrounds can clip or misalign when the content becomes longer.

 

A few additional checks

Regardless of which approach you choose:

  • Image URL: Avoid relative filenames such as request_completed_footer_01.png. Use a complete HTTPS URL.

  • Image accessibility: Verify that the image can be accessed by the recipient's email client without requiring an authenticated ServiceNow or SharePoint session.

  • Image blocking: Keep a solid background colour and readable fallback text.

  • Testing: Send an actual notification and test it in Classic Outlook, New Outlook, Outlook Web and Gmail. The ServiceNow browser preview alone is not sufficient.

References:

I would personally start with Option 1 if the design permits it. If the text and hyperlink must remain over the footer image, Option 2 is the approach I would explore.

 

Helpful? Please mark the response as Accepted Solution ✅ and close the thread 🔒 — this helps future readers find the solution faster.

 

Regards,
Sachinvic
✨ArchX Certified | ✨ 16x ServiceNow AI MVP

0 Helpfuls