Email Newsletter Background Image & Font Color

StackOverflow https://stackoverflow.com/questions/12741320

Question

I have just coded an email design, tested it in Litmus & found out the following errors:

Outlook.com: There was no background image for the newsletter & some of the headings (h4) font color is totally different. Although the same color is OK for the links. outlook 2003-2011 works fine.

Hotmail: Similar is the case for hotmail as it also doesn't show up the background for the newsletter.

Here are the litmus results.

https://tahir.litmus.com/tests/9401666/versions/2/screenshots

Here is the code for background image:

<body background="http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/body_bg_.3.jpg" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style=" width:100%; margin: 0;padding: 0;width: 100% !important;-webkit-text-size-adjust: none; background-image: url('http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/body_bg_.3.jpg'); background-repeat:repeat-y no-repeat; background-position: top center; background-color: #5c130a;">

    <!--[if gte mso 9]>
    <v:background fill="t">
    <v:fill type="tile" src="http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/body_bg_.3.jpg" />
    </v:background>
    <![endif]-->

Thanks.

Was it helpful?

Solution

Keep in mind, that CSS is not supported equally by the Clients (and Versions)

To get an overview you should take a look at http://www.campaignmonitor.com/css/

OTHER TIPS

Here is a snippet of ours.

<td height="300px" style="margin:0;border-collapse:collapse!important;margin:0;padding:0;text-align:left;vertical-align:top;">
<!--[if (gte mso 9)]><img src="http://yourdomain.com/email_campaigns/_templates/template_061617/ImageHero_620x975_Nindi_1_OL.jpg" style="width:100%;height:auto;border:0; display: block;" /><![endif]-->
<div style="mso-hide: all;">
<img src="http://yourdomain.com/email_campaigns/_templates/template_061617/newsletter-blank.png" width="100%" style="width:100% !important;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin:0 0 0 0;border-width:0;height:auto;margin-bottom:0;" />
</div>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top