CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
Patrick
Patrick

Reputation: 17

HTML Email Template not showing background image in Outlook 365 anymore

I have an HTML template that has a repeated background image and the image is hosted on https://imgbb.com/ (here is the image: https://i.ibb.co/NKYLjxT/topography-compressed.png).

Here is the HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en-GB'>
<head> 
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/> 
  <title>NaviGATE
  </title> 
  <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
</head>
<body style='margin: 0; padding: 50px 0 50px 0; background: url(https://i.ibb.co/NKYLjxT/topography-compressed.png); font-family: sans-serif; line-height: 1.6'> 
  <table role='presentation' cellpadding='0' cellspacing='0' width='100%'> 
<tr> 
  <td> 
    <table align='center' border='1' cellpadding='0' cellspacing='0' width='600' style='border-collapse: collapse;'> 
      <tr> 
        <td> 
          <table style='border-collapse: collapse; width: 100%'> 
            <tr> 
              <td align='center' bgcolor='#ffffff' style='padding: 40px 0 30px 0;'> 
                <img src='###company logo###' alt='' width='300' style='display: block;'/> 
              </td>
            </tr>
            <tr> 
              <td bgcolor='#ffffff' style='padding: 40px 30px 40px 30px;'> 
                <p style='margin: 0;'>BODY OF EMAIL
                  <br/>
                  <br/> 
                </p>
              </td>
            </tr>
            <tr> 
              <td bgcolor='#2f3c48' style='padding: 10px 30px 10px 30px;'> 
                <p style='margin: 0;'>
                  <a href='#homepage#' style='color: #ffffff'>internal home page
                  </a>
                </p>
              </td>
            </tr>
          </table> 
        </td>
      </tr>
    </table> 
  </td>
</tr>
  </table>
</body>
</html>

When viewing the email in Outlook 365, the background image doesn't show up at first. But when the window is resized, it shows up like normal. Same behavior on another computer using Outlook 365. On Gmail everything appears as normal.

Is there something I can do differently in the HTML to force it to show up?

I've compressed the image as much as I could. I tried using a vector of the image to use it in inline CSS, but it didn't work (the code was massive). I tried encoding in Base64, no luck either.

I don't think it is an Outlook setting because about a month ago when I originally tested the template, it appeared as normal. Maybe the most recent patch broke it? I'm not sure. Using Version 2104 (Build 13929.20296)

Upvotes: 0

Views: 4250

Answers (1)

Eugene Astafiev
Eugene Astafiev

Reputation: 49397

The background property (only when there is a URL) is not supported in Outlook. The fact is that Outlook uses Word for rendering message bodies. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

Upvotes: 2

Related Questions