Skip to main content
Emily_Kendall
Emily_Kendall
Level 2
July 18, 2019
Question

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

  • July 18, 2019
  • 2 replies
  • 5501 views

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 

HTML Code is attached as well. 

Any help is appreciated! 

2 replies

J_Grant_Gray
J_Grant_Gray
Level 3
July 18, 2019

add style=""

background-repeat: no-repeat;

and see if this helps. 

    Emily_Kendall
    Emily_KendallAuthor
    Level 2
    July 18, 2019

    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.  

    Dave_Roberts
    Dave_Roberts
    Level 10
    July 19, 2019

    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

      Emily_Kendall
      Emily_KendallAuthor
      Level 2
      July 19, 2019

      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 

      Dave_Roberts
      Dave_Roberts
      Level 10
      July 20, 2019

      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]>. 

        Terms & ConditionsAccessibility statement

        Loading footer...