CSS Background-image "image" Not Showing Up In Outlook

I've got an HTML based email created and one of the elements on there has a 'background-image' property defined. When the email is sent and received in Outlook, the background-ima

Solution 1:

Outlook 2000-03 support background images because they use Internet Explorer as their rendering engine. However with Outlook 2007-16 they switched to Microsoft Word, which makes them an absolute pain in the neck.

Outlook 07-16 will not support background images unless you use VML. Campaign Monitor has a decent tool for building that code: https://backgrounds.cm/

Another option is to use the bgcolor attribute on your div. Outlook 07-16 is the only email browser that still supports that. All other browsers will use your background image instead. You won't have the rounded corners, but your gray background will be there.

For any other questions about which browsers support what, use this list: https://www.campaignmonitor.com/css/color-background/background-image/

Solution 2:

Here's what I did to resolve the issue

<!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="width:600;height:257;" arcsize="10%"  fillcolor="#e3e4e5" strokecolor="#ffffff">
<div style="text-align:center;">
 <p align="center" style="bottom:50px; left:100px;">
<br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div>

    </v:roundrect>
    <![endif]--><!--[if !mso]><!--><div style="text-align: center;">
 <p style="border-radius:25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-style:solid; align: center; bottom: 50px; left: 100
px; background:#e3e4e5; border-color:#e3e4e5">
  <br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div><!-- <![endif]-->

Which produced the following in Outlook (nevermind the purple bar. It's just part of the screenshot, the next element):