2

Stack Overflow users.

We run a newsletter. We need to display an image with text as a header.

We've got a massive personalization for a big user database, so we need a dynamic text overlaying a text image.

What are the options currently supported by most clients?

The obvious plan is to use table's background-image. Supposedly it's not working in Outlook?

There is a fallback plan that's bulletproof in terms of client support: generate an image server-side an include as graphic file. What would be the easiest way to implement it in case nothing else works?

What way would you go? Thanks!

SMailer
  • 21
  • 1
  • 2
  • Welcome to SO! This question is bit off-topic and too broad for Stack Overflow. There are many resources online dealing with background-images in Outlook. Here's a handy guide on topics for SO: https://stackoverflow.com/help/on-topic – disinfor Jun 13 '17 at 15:32

2 Answers2

2

CSS background images are not supported in OUTLOOK, you will need to use VML, https://backgrounds.cm/

Sometinhg like this :

<table>
    <tr>
        <td background="https://image.freepik.com/free-vector/abstract-background-with-a-3d-pattern_1319-68.jpg" width="150" height="150">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" 
                style='width:150px;height:150px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
                src="https://image.freepik.com/free-vector/abstract-background-with-a-3d-pattern_1319-68.jpg" />
            <![endif]-->
            <p>Put the rest of your content here</p>
        </td>
    </tr>
</table>

Here are couple of examples :

Examlple 1

Example 2

pk_code
  • 2,608
  • 1
  • 29
  • 33
  • which part of the email is this background for? Seems its to place a background around the whole email? The OP is after an image personlisation. I had edited your answer to reflect that. – Syfer Jun 13 '17 at 21:33
2

Background in Outlook works with VML only. To add an image to a table cell for personlisation i would suggest using the below code: 

 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td background="[IMAGE GOES HERE]" style="background:url('[IMAGE GOES HERE]'); background-image: url('[IMAGE GOES HERE]');">
   <!--[if gte mso 9]>
   <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[ADD WIDTH OF IMAGE];height:[ADD IMAGE HEIGHT];">
  <v:fill type="frame" src="[IMAGE GOES HERE]" color="[FALLBACK COLOR]" />
  <v:textbox inset="0,0,0,0">
   <![endif]--> 

  [HTML CONTENT HERE]

  <!--[if gte mso 9]>
  </v:textbox>
   </v:rect>
   <![endif]-->
   
   
   </td>
    </tr>
  </tbody>
</table>

There are some values that will need changing before your VML will work properly:

  • images to change
  • fallback color to change
  • VML height and width to change

Note: When using VML your content will have to fit within the VML or there will be cases where content overflows but will not show. So keep in mind when this is being built. With this example you can add rounded corners with arcsize in percentages.

Hope this is the answer you were after.

Syfer
  • 4,262
  • 3
  • 20
  • 37