[Notifications] How to insert a background image in template ?

Community Alums
Not applicable

Hi community,
I am creating an HTML notification template and I can not insert a table with an image in background.
The image is saved in the db_image table.
When inserting the image with the tag img , the image is saved in the email and appears correctly.

<img src = "myimage.png" />


But when it inserted via the background attribute, the image is not attached to the notification and so doesn't received into the email

<table border = "0" width = "100%" cellspacing = "0" cellpadding = "0" bgcolor = "# FFFFFF" background = "myimage.png">
...
</ Table>


I don't want to host the image on an external server

Has anyone ever had these problems?
Is there a trick?

 

Thanks in advance

Christophe

1 ACCEPTED SOLUTION

Harsh_Deep
Giga Sage
Giga Sage

Hello @Community Alums 

 

Try to use these 2 way around-

 

1. We need to use the code directly in the Message HTML field instead of using in the Notification scripts.
We need to make sure we are giving the complete URL of the image in the code

Sample code to add the attribute in the HTML field

<Style> body {background-image:URL('https://<instancename>.servicenow.com/imagename.jpg');} </Style>

This will help reflecting the background image for the Notification and can be seen in Preview and in Email clients as well.

 

2. 

Include in HTML Email Body : <Style> body {background-image:URL('https://<instance-name>.servicenow.com/banner-img.jpg');} </Style>

Include in Email Script : Template.Print("<Style> body {background-image:URL('https://<instance-name>.servicenow.com/banner-img.jpg');} </Style>");

 

If my answer has helped with your question, please mark my answer as accepted solution and give a thumb up.👍

View solution in original post

4 REPLIES 4

Gurpreet07
Mega Sage

try background in inline style tag instead...

style="background:url('myimage.png')"

Community Alums
Not applicable

Hi Gurpreet,

thanks for the suggestion. I have tried it but it the same result

Here you have the result in Gmail client :

with img tag

If I insert:

<img style="display: block;" src="myimage.png" alt="">

I receive :

<img style="display:block" src="?ui=2&amp;ik=70a4a472b7&amp;view=fimg&amp;th=162f722e3dba1c0e&amp;attid=0.3&amp;disp=emb&amp;attbid=ANGjdJ_x467_3tGt0JroZOsOvHISF1C8c3bo-u0CU3qUMB-k11Qxl73W1XftdhRyTlSUiMHK-XCSvV3zzHghK_r6o7qCYLgaXEjL63_4g6BD_fdnOUjsJ2C4AoTS2nM&amp;sz=s0-l75-ft&amp;ats=1524564697515&amp;rm=162f722e3dba1c0e&amp;zw&amp;atsh=1" alt="" class="CToWUd a6T" tabindex="0">

with style="background:url()

If I insert :

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="background:url('myimage.png');">

I receive :

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="background:url('https://ci5.googleusercontent.com/proxy/xttg_Bo-LqcCvyM4yaIkczjarNNPKUvUS45IsqSF4qMYC-mLZnvrRQcep7uw=s0-d-e1-ft#http://myimage.png')">
    ...
</table>

 

with background attribute

If I insert :

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" background="myimage.png">
...
</table>

I receive :

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" background="https://ci5.googleusercontent.com/proxy/xttg_Bo-LqcCvyM4yaIkczjarNNPKUvUS45IsqSF4qMYC-mLZnvrRQcep7uw=s0-d-e1-ft#http://myimage.png">
...
</table>

Hi @Community Alums 

Have you figured out how to add a background image to an email template?

Harsh_Deep
Giga Sage
Giga Sage

Hello @Community Alums 

 

Try to use these 2 way around-

 

1. We need to use the code directly in the Message HTML field instead of using in the Notification scripts.
We need to make sure we are giving the complete URL of the image in the code

Sample code to add the attribute in the HTML field

<Style> body {background-image:URL('https://<instancename>.servicenow.com/imagename.jpg');} </Style>

This will help reflecting the background image for the Notification and can be seen in Preview and in Email clients as well.

 

2. 

Include in HTML Email Body : <Style> body {background-image:URL('https://<instance-name>.servicenow.com/banner-img.jpg');} </Style>

Include in Email Script : Template.Print("<Style> body {background-image:URL('https://<instance-name>.servicenow.com/banner-img.jpg');} </Style>");

 

If my answer has helped with your question, please mark my answer as accepted solution and give a thumb up.👍