Email Rendering Issues in Outlook and Hacks to Save the Day
With a plethora of email clients available for the end user and each one rendering emails in different ways, coding and designing an email has been a turmoil for email marketers.
elasticemail.com
Unfortunately, Outlook 2007-2013 does not support any of the above backgrounds, but the ideal solution for rendering is by using VML (Vector Markup Language).
Input the below code in the <body> tag of your HTML for the background image to cover the entire email window.
<td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e" style="height:700px; background-image:url(Image Live URL Here);background-color: #f7901e;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 600px; height: 400px;">
<v:fill opacity="0%" color="#555555" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!-- HTML Content Here -->
</div>
<!--[if gte mso 9]>
</td>
While this code worked wonders in displaying the background image to emails opened in Outlook 2007, 2010 and 2013. But Windows Mail 10 still faced issues and needed the code to be modified to add v: image with its source allowing the background image over the container using v: rect. Moreover, by adding properties such as opacity as 0% in v: fill enables the top layer to be transparent to allow new div with content in it and placing inline-block; position: absolute in v: rect the container position is fixed as a background.
------------------------------
CSS Background Images Now Supported in Outlook.com - Email On Acid
Great news! Outlook.com and Office 365 Outlook (also known as OWA) now support CSS background images.
www.emailonacid.com
November 10, 2017
Outlook.com and Office 365 Outlook (also known as OWA) now supports CSS background images. Until now, Microsoft’s webmail properties only supported table background image attributes and not support CSS background images. This restriction forced email designers to use table background attributes in order to display a background image in Outlook.com.
Outlook.com supports background images in both shorthand and individual properties.
------------------
css-tricks.com/almanac/properties/b/background/
background | CSS-Tricks
The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand
css-tricks.com
The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:
body {
background: url(sweettexture.jpg) /* image */
top center / 200px 200px /* position / size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
red; /* color */
}
-------------------------------------
www.contactmonkey.com/blog/outlook-rendering-issues
Outlook Rendering Issues: Create HTML Emails in Outlook
Getting rid of Outlook rendering issues can be a nightmare. Follow these tips to help you create HTML email newsletters in Outlook & code HTML emails.
www.contactmonkey.com
<body width=“100%” style=“margin: 0; padding: 0 !important; mso-line-height-rule: exactly;”>
<table role=“presentation” cellspacing=“0” cellpadding=“0” border=“0” style="-ms-text-size-adjust: 100%;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
<td style="-ms-text-size-adjust: 100%;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
<img src="" style="-ms-interpolation-mode:bicubic;">
<style>
/* Remove space around the email design. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* Stop Outlook resizing small text. */
* {
-ms-text-size-adjust: 100%;
}
/* Stop Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* Use a better rendering method when resizing images in Outlook IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
</style>