Header Images in Marketo Email Templates are "Tiling" in Outlook Desktop

Highlighted

Header Images in Marketo Email Templates are "Tiling" in Outlook Desktop

Hello Marketo Nation! 

I am having an issue with header images "tiling" in Microsoft Outlook 2016 desktop. Not happening anywhere else, just Outlook Desktop. The images are sized correctly in png format. 

Here is a link to a screen shot of what is happening: Screenshot, 2019-07-18 19:50:52 - Paste.Pics screenshot.png

HTML Code is attached as well. 

Any help is appreciated! 

5 REPLIES 5
Highlighted
Level 3

Re: Header Images in Marketo Email Templates are "Tiling" in Outlook Desktop

add style=""

background-repeat: no-repeat;

and see if this helps. 

Highlighted

Re: Header Images in Marketo Email Templates are "Tiling" in Outlook Desktop

OMG! Thank you for the quick response. I am not a coder...so forgive me when I ask where in the code I should insert that.  

Highlighted
Level 6

Re: Header Images in Marketo Email Templates are "Tiling" in Outlook Desktop

Hey Emily,

If the issue you're running into is happening in Outlook and not other places, it likely has to do with the special Outlook code (vml) that's used to populate the background image instead of the CSS (background-repeat) like the rest of the "normal email universe". 

I had a look at your code and round-about line 210 you'll find the following chunk of code:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:300px;">
<v:fill type="tile" src="http://go.phillipsedison.com/rs/205-LAX-984/images/Ice Cream-1070-411.png" color="#4b4933" />
<v:textbox inset="0,0,0,0">

On line 3 above, you'll see the type="tile" attribute that's setting your image to repeat (tile). There's a few values for the type attribute, here's a link that's got a bit more info on that: https://docs.microsoft.com/en-us/windows/win32/vml/type-attribute--fill--vml

The best option you've got from that list is the frame value, which will stretch the image to fill the size of the rectangle ( 640x300). You could change the type="tile" to type="frame" and make sure that the image that you are using is exactly 640x300 so that it fits nicely into the frame without stretching.

It doesn't look like this is setup to be editable from within the email editor so you might need to open up the template and make the change there. You should be able to search for "<v:fill" to find this in the code.

Let me know if that worked or if you've got any questions about getting this into play in the code.

-Dave

Highlighted

Re: Header Images in Marketo Email Templates are "Tiling" in Outlook Desktop

Hi Dave, 

First of all, super helpful and I appreciate the specific instructions. I went in and made the changes you recommended in the master template, and now it won't let me approve and close the master template because of this error message documented in the link below. Any thoughts on this? 

Screenshot, 2019-07-19 22:11:03 - Paste.Pics 

Thanks again!

Emily 

Highlighted
Level 6

Re: Header Images in Marketo Email Templates are "Tiling" in Outlook Desktop

This warning usually means there is an invalid module somewhere in there, and it's usually the case that it's not a direct child of the "mktoContainer" element. I had a look at the 1st code you attached and don't see anything there that would be causing this. In this case, it looks like there is a table element with class="main" nested inside the element with id="module-wrapper" and that's causing the error. When I looked at the code we started with here, I was able to find a couple tables with the "main" class, but none of them were inside the "module-wrapper" element. Maybe something got out-of-order with the table structure here?

Do you think you could upload a copy of your updated HTML so I could take a look thru that and see if anything jumps out?

The VML code for the background image shouldn't have an effect on the module structure since it's commented out in the code.

The exception is mso (Microsoft Office) gte (versions greater than) 9) -- in the code the opening comment tag looks like this: <!--[if gte mso 9]>.