SOLVED
Home

Custom HTML email signature with links and images - background image not working

%3CLINGO-SUB%20id%3D%22lingo-sub-687183%22%20slang%3D%22en-US%22%3ECustom%20HTML%20email%20signature%20with%20links%20and%20images%20-%20background%20image%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-687183%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20clever%20People%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20developed%20a%20html%20table%20with%20links%2C%20logo%20and%20other%20images%2C%20for%20a%20signature%20to%20be%20used%20in%20all%20email%20clients.%20It%20also%20has%20a%20background%20image%20(orange%20gradient).%20All%20the%20images%20are%20hosted%20on%20an%20external%20server.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20problem%20is%2C%20when%20I%20copy%2Fpaste%20from%20the%20browser%2C%20the%20background%20image%20doesn't%20come%20through.%20I%20tried%20doing%20it%20with%20CSS%20gradient%20and%20now%20with%20an%20image%2C%20but%20still%20the%20background%20image%20is%20not%20transferred%20into%20Outlook.%20Apple%20mail%20has%20no%20problem%20with%20even%20the%20CSS%20gradient%20background.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22http%3A%2F%2Fbespokemedia.co.za%2Femailsignatures%2Fclic%2Fusers%2Fseraj-test.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EClick%20Here%3C%2FA%3E%20to%20see%20the%20signature%20I'm%20refering%20to.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20advice%20or%20if%20this%20is%20possible%20with%20a%20different%20method%3F%20Thank%20you.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMario.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-687183%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EOutlook%20for%20Windows%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-747197%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20HTML%20email%20signature%20with%20links%20and%20images%20-%20background%20image%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-747197%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F358936%22%20target%3D%22_blank%22%3E%40marioi%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOutlook%20on%20Windows%20does%20not%20support%20background%20image.%3CBR%20%2F%3EOutlook%20on%20Windows%20uses%20Word%20to%20render%20the%20HTML%20(not%20the%20browser).%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3EYou%20can%20add%20any%20colour%20as%20the%20background%20-%20E.g.%26nbsp%3B%23F9B578%20(found%20in%20your%20gradient%20image)%20-%20Learn%20how%3A%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fsupport.xink.io%2Fsupport%2Fsolutions%2Farticles%2F1000258918-html-pro-table-bgcolor-snippet%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.xink.io%2Fsupport%2Fsolutions%2Farticles%2F1000258918-html-pro-table-bgcolor-snippet%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-792957%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20HTML%20email%20signature%20with%20links%20and%20images%20-%20background%20image%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-792957%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F336812%22%20target%3D%22_blank%22%3E%40Jesper_Frier%3C%2FA%3EHi%20Jesper%2C%20thank%20for%20replying%20and%20apologies%20for%20my%20late%20response.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJust%20making%20sure%20with%20this%20also...%20would%20using%20the%20%22gradient%22%20(inline%20CSS)%20statement%20on%20the%20table%20also%20not%20work%2C%20instead%20of%20using%20bgcolor%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESay%20something%20like%20this%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%3C%2FCODE%3E%3CTABLE%20style%3D%22background-image%3A%20linear-gradient(to%20right%2C%20red%20%2C%20yellow)%3B%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FTABLE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-792997%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20HTML%20email%20signature%20with%20links%20and%20images%20-%20background%20image%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-792997%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F358936%22%20target%3D%22_blank%22%3E%40marioi%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYes%2C%20use%20only%26nbsp%3B%3CSPAN%3E%3CSTRONG%3Ebgcolor%3C%2FSTRONG%3Eand%20avoid%26nbsp%3Bgradient%20style.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EGenerally%2C%20Outlook%20on%20Windows%20does%20not%20support%20many%20styles.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EIf%20you%20can%2C%20avoid%20styles%20and%20you%20are%20safe%20%3A)%3C%2Fimg%3E%3CBR%20%2F%3E%3CBR%20%2F%3EThis%20is%20our%26nbsp%3B%3C%2FSPAN%3E%3CFONT%20face%3D%22arial%2Chelvetica%2Csans-serif%22%20size%3D%224%22%3E%3CFONT%20size%3D%223%22%3ETable%20bgcolor%20snippet%3C%2FFONT%3E%3C%2FFONT%3E%3CSPAN%3E%26nbsp%3Bwe%20use%20when%20helping%20clients%20with%20email%20signatures%20templates%3A%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fsupport.xink.io%2Fsupport%2Fsolutions%2Farticles%2F1000258918-html-pro-table-bgcolor-snippet%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.xink.io%2Fsupport%2Fsolutions%2Farticles%2F1000258918-html-pro-table-bgcolor-snippet%3C%2FA%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-793052%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20HTML%20email%20signature%20with%20links%20and%20images%20-%20background%20image%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-793052%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F336812%22%20target%3D%22_blank%22%3E%40Jesper_Frier%3C%2FA%3E%26nbsp%3B%20Thanks.%20I%20would%20have%20used%20a%20simple%20bgcolor%2C%20but%20unfortunately%20the%20color%20gradient%20is%20part%20of%20the%20branding.%3C%2FP%3E%3CP%3EI'll%20have%20to%20rethink%20the%20design.%20Thanks%20for%20your%20responses.%20Much%20appreciated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPS%3A%20Tell%20Mr%20Gates%20to%20stop%20being%20so%20a**l%20with%20outlook%20LOL.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-799745%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20HTML%20email%20signature%20with%20links%20and%20images%20-%20background%20image%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-799745%22%20slang%3D%22en-US%22%3E%3CP%3EI%20believe%20you%20may%20be%20able%20to%20do%20a%20gradient%20with%20VML%20code%20possibly.%26nbsp%3B%20Worth%20Googling.%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F358936%22%20target%3D%22_blank%22%3E%40marioi%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere's%20a%20starter%20example%20%3CA%20href%3D%22https%3A%2F%2Fbackgrounds.cm%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fbackgrounds.cm%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-799748%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20HTML%20email%20signature%20with%20links%20and%20images%20-%20background%20image%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-799748%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F390805%22%20target%3D%22_blank%22%3E%40SquareBalloon%3C%2FA%3EHmmm%20...%20interesting.%20I'll%20check%20it%20out.%20Thanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E
marioi
New Contributor

Hi clever People,

 

I developed a html table with links, logo and other images, for a signature to be used in all email clients. It also has a background image (orange gradient). All the images are hosted on an external server.

 

The problem is, when I copy/paste from the browser, the background image doesn't come through. I tried doing it with CSS gradient and now with an image, but still the background image is not transferred into Outlook. Apple mail has no problem with even the CSS gradient background.

 

Click Here to see the signature I'm refering to.

 

Any advice or if this is possible with a different method? Thank you.

 

Mario.

6 Replies

Hi @marioi

 

Outlook on Windows does not support background image.
Outlook on Windows uses Word to render the HTML (not the browser).

You can add any colour as the background - E.g. #F9B578 (found in your gradient image) - Learn how:
https://support.xink.io/support/solutions/articles/1000258918-html-pro-table-bgcolor-snippet 

@Jesper_FrierHi Jesper, thank for replying and apologies for my late response.

 

Just making sure with this also... would using the "gradient" (inline CSS) statement on the table also not work, instead of using bgcolor?

 

Say something like this

 

<table style="background-image: linear-gradient(to right, red , yellow);">

 

Solution

Hi @marioi ,

 

Yes, use only bgcolor and avoid gradient style. 

Generally, Outlook on Windows does not support many styles.

If you can, avoid styles and you are safe :)

This is our 
Table bgcolor snippet we use when helping clients with email signatures templates:
https://support.xink.io/support/solutions/articles/1000258918-html-pro-table-bgcolor-snippet

@Jesper_Frier  Thanks. I would have used a simple bgcolor, but unfortunately the color gradient is part of the branding.

I'll have to rethink the design. Thanks for your responses. Much appreciated.

 

PS: Tell Mr Gates to stop being so a**l with outlook LOL.

I believe you may be able to do a gradient with VML code possibly.  Worth Googling. @marioi 

Here's a starter example https://backgrounds.cm/

@SquareBalloonHmmm ... interesting. I'll check it out. Thanks!

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
46 Replies
Extentions Synchronization
Deleted in Discussions on
3 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
flashing a white screen while open new tab
Deleted in Discussions on
14 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
29 Replies
Security Community Webinars
Valon_Kolica in Security, Privacy & Compliance on
13 Replies