How Make Background Image on Newsletter in Outlook

Outlook newsletter background image and text

Thanks for the help, I figured it out.

The following code works, the text is visible.

    <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; height:230px; width:230px; border:0; z-index:1;' src="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}"/>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:230px; width:230px; top:-20px; left:0; border:0; z-index:2;'>
        <![endif]-->
        <table width="230" height="230" border="0" cellspacing="0" cellpadding="0">
            <tr height="230">
                <td width="230" style="text-align: center; font-size: 14px; color: white; font-family:verdana; line-height:22px;">{$mkNews.message|convertEncoding:'utf8_decode'|regex_replace:"/[\ï»¿]/":""}</td>
            </tr>
        </table>
        <!--[if gte mso 9]>
        </v:shape>
        <![endif]-->

The text should be in a extra table, then it's visible in outlook 2010.

background image in Outlook 2010 (email newsletter)

As long as the design is not reliant on absolutes, I say go for it. Support is as large as it has ever been on background image usage and with some tweaks and 'hacks' you can get your emails looking great (even on Outlook!).

Best place to go is bulletproof backgrounds they will give you the code (HTML/CSS and VML for outlook) for both a bg image for a TD and a bg image for whole email. This is a great leaping off point and helps do most of the leg work for you right off the bat.

When positioning your children over the image in parent container, I would make sure to reference CSS compatability across each email client and do acid test after acid test to make sure it is displaying as you wanted.

It may take a bit of extra work, but the results can be more than worth it.

Background Image Issues in Outlook

Images are normally inline elements, not block. You can't make inline elements "align" left or right. So putting them within a block such as a paragraph may seem intuitively to solve that issue, except that the alignment needs to occur via that block element (the paragraph, in this case).

Since you want the text aligned left and the images aligned right, we really need two block level elements, and the best way to do that is to create a table.

Ensure you have the table going the full width of the available space (width="100%").

I haven't addressed default padding and other defaults, but here's the basic way forward that works:

    <body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">

    <table style="width: 600px;" align="center" border="0">
      <tbody>
        <tr>
         <td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
    <v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
      <table width="100%">
          <tr>
              <td>
                  
      <p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
          SUBJECT HEADING</strong></p>
              </td>
              <td style="text-align: right;"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png" ><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png">
          </td>
          </tr>
      </table>
            </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
        </tr>
      </tbody>
    </table>
                
            
</body>

P.S. you might think you can just add "display:block" to the images, but Outlook doesn't let you do that. It will just ignore that style.

CSS background-image image not showing up in Outlook

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/

HTML Email Template not showing background image in Outlook 365 anymore

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.