Forum Discussion
Solved
Custom HTML email signature with links and images - background image not working
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.
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
Outlook has limited support for background images, especially when applied via CSS. Unlike Apple Mail, which supports CSS-based backgrounds, Outlook often ignores them or strips them out. Here are a few workarounds you can try:
1. Use a Table with a Background Image in VML (For Outlook)
Since Outlook doesn’t fully support background-image in CSS, you need to use Vector Markup Language (VML), which is Microsoft’s proprietary way of handling backgrounds:
<v:background fill="true" stroke="false"> <v:fill type="tile" src="https://yourdomain.com/background-image.jpg" /> </v:background> <table role="presentation" width="100%" style="background-color: #f5f5f5;"> <tr> <td> <p>Your Signature Content Here</p> </td> </tr> </table>
This method ensures that the background image is displayed in Outlook while other email clients render it normally.
2. Inline Background Image with TD Element
Instead of applying a background image via CSS, use an inline background attribute inside a <td> tag:
<td background="https://yourdomain.com/background-image.jpg" style="background-size: cover;"> Your signature content here </td>
While this method works in most clients, it may not be as reliable as VML in Outlook.
3. Convert the Background into an Embedded Image
If the background is essential, another approach is to flatten the background into a full image and embed text/logos inside the image itself. You can then use a regular <img> tag to display it.
Conclusion
Outlook’s email rendering engine (Word-based) does not support modern CSS fully, so using VML or inline table background attributes is your best bet. If possible, test your signature using tools like Litmus or Email on Acid to see how it behaves in different email clients.
Outlook has limited support for background images in email signatures. Instead of CSS backgrounds, try using a table with a background color or wrapping the content in a VML-based solution for better compatibility. Hope this helps!
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-snippetJesper_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);">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
