/ Email Development

Background image won't show up until we click

It's been a busy week again. My apology that this solution should be posted earlier.

OK. Before we start, please notice that This solution currently only applies to a fixed dimension background image.

The problem is that when we are using the background solution provided by Stig's backgrounds.cm. Sometimes the image won’t show up until you click on the image. So it will looks like below the first time you open it.

Screenshot - Not working

And then click it. It turns out to be…

Screenshot - Working

To explain this I have to say there is no official explanation to this only if we ask Microsoft Office team. So after a long of testing, I find that there is no rules that I can apply on it. All I can say it's caused by the VML element. Only image in v:textbox and v:background shape won't have this issue. All of the other shape is having this issue with v:fill tag, in Stig's solution, v:rect is actually a rectangle shape. So all we need to do is to get rid of the v:rect or the v:fill.

So I digged deeper and found that the v:textbox can actually cover the things below with a transparent background. So you will only need to put an image below which acting like a background image. Then put all the things in the v:textbox, and then it's done.

To do that, I'll put an example here and explain how it works.

<td background="http://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
<!--[if gte mso 9]>
<img src="http://i.imgur.com/YJOX1PC.png" alt="replace" height="92" width="120" border="0" style="display: block;" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:relative;top:0;left:0;width:120px; height: 92px;">
    <v:textbox inset="0,0,0,0">
<![endif]-->
CONTENT GOES HERE
<!--[if gte mso 9]>
    </v:textbox>
</v:rect>
<![endif]-->
</td>

All you need to change is the URLs and the dimensions. If you are using the email service of Exact Target, you will probably see a very weird looking in the preview panel. Simply send it out and it should pass the render test successfully.

So as you can see there is an extra <img> tag under the mso condition, this is the image you should put under your text box. And then wrap everything with the v:rect v:textbox VML code.

If you have any problem, simply send me an email.
cyxjimmy@gmail.com

Woody Chai

Woody Chai

I love HTML, CSS and JAVASCRIPT. I'm an developer working on SFMC (AMPScript, SSJS, SOAP/REST API). Love to work on all kinds of issues and dig out new technologies.

Read More