Solved

Section background image is not showing in my email test

  • 28 November 2022
  • 3 replies
  • 1606 views

Badge +2
  • Contributor I
  • 2 replies

Hi all, 

 

I hope someone can help me. 

I’ve built my template using section background images. All great until I send a test email to myself to see if all comes out nice in the other end.

Here is the issue. The images are not appearing, in the end, result in my inbox. Any idea why? 

view of template
How it arrived in my inbox

 

icon

Best answer by David To 29 November 2022, 19:23

View original

3 replies

Userlevel 7
Badge +58

Hi there @Ieva ,

Thanks for sharing in the Community.

Question, how are these images built in your template? Are these supposed to be static images that come in and how did you add them to your email? This could be some email design formatting issue but I am also curious what email provider you sent this test to as well.  You can also try disable the CSS Optimization setting in the Settings > Email section (https://www.klaviyo.com/account#email-tab) and then send the preview. 
I would suggest you have a look at Understanding CSS Optimization you will find some reasons why you would have this option enabled.

Here is one community post that might be related:

 

Hope to hear from you,

Alex

Badge +2

Hi @alex.hong,

The images are added based on this guide, https://help.klaviyo.com/hc/en-us/articles/4408802285083-How-to-Set-a-Background-Image-for-a-Call-to-Action-new-editor-

My email provider is outlook - I just did a test on sending to my personal email - Gmail and now the email looks fine, so it must be something for outlook that disrupts it. 

Also did a test with the CSS setting, and it didn't change anything in my outlook email. 

Any, ideas? :) 

Update: I checked my online outlook inbox and the emails come out perfect, it is only in my desktop outlook inbox where the images are not showing

/Ieva

Userlevel 7
Badge +60

Hey @Ieva,

Really appreciate those additional tests you’ve performed!

Sounds to me like your Outlook desktop inbox version is using Microsoft Word as its rendering engine. Whereas your online Outlook inbox is using Webkit, which explains why it’s rendering without issues. 

It’s actually not uncommon for emails to look a bit off in Outlook sometimes. This is actually an industry-wide roadblock stemming from how Outlook renders emails. This is further explained in our My email looks different when viewed in Microsoft Outlook Help Center article in case you didn’t get a chance to take a look at it. 

Ever since 2007, Microsoft/Outlooked switched from using Internet Explorer to render HTML to Microsoft Word which causes some known issues such as the following:

  • No support for background images in divs and table cells
  • No support for CSS float or position
  • No support for text shadow
  • Poor support for padding and margin
  • Poor support for CSS width and height
  • Problems with nested elements background colors 

Litmus, an email preview software we highly recommend has a great blog article they written providing some tricks in combatting these difference: Outlook Email Rendering Issues and How to Solve Them.

David

 

Reply