Forum Discussion

marioi's avatar
marioi
Copper Contributor
Jun 12, 2019
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.

 

http://bespokemedia.co.za/emailsignatures/clic/users/seraj-test.html 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

8 Replies

  • paulraun's avatar
    paulraun
    Copper Contributor

    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. If you're designing a professional https://exclaimer.com/email-signature-handbook/html-email-signature/, using inline styles and well-structured tables can help ensure better rendering across different email clients. Hope this helps!

  • r0ssco's avatar
    r0ssco
    Copper Contributor

    marioi 

     

    https://sigful.com/article/how-to-code-a-professional-email-signature-1599495811394x103353090209328930 

  • Jesper_Frier's avatar
    Jesper_Frier
    Brass Contributor

    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 

    • marioi's avatar
      marioi
      Copper Contributor

      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);">

       

      • Jesper_Frier's avatar
        Jesper_Frier
        Brass Contributor

        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

Resources