I am creating a new template for a newsletter. The following code produces what I want to see but as you will all know background images do no play well in Outlook.
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td style="height: 60px; padding: 5px; border-radius: 5px 5px 0px 0px; vertical-align: middle; background-color: white;"
background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png">
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"
align="right"></p>
</td>
</tr>
</tbody>
</table>
Intended result
I found an answer on here recommending using https://backgrounds.cm/ so here is the code I got back.
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
<v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"
align="right"></p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Which give me this in Outlook
Outlook Weirdness
I have tried to fix this but I'm not a particularly skilled programmer. I can usually intuit what the problem is but I'm at a loss here.
The grey bar definitely needs to be a background image as I need to place text and images on top (the smaller images will be links at a later stage).
Hope you guys can help.
Images are normally inline elements, not block. You can't make inline elements "align" left or right. So putting them within a block such as a paragraph may seem intuitively to solve that issue, except that the alignment needs to occur via that block element (the paragraph, in this case).
Since you want the text aligned left and the images aligned right, we really need two block level elements, and the best way to do that is to create a table.
Ensure you have the table going the full width of the available space (width="100%").
I haven't addressed default padding and other defaults, but here's the basic way forward that works:
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
<v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%">
<tr>
<td>
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong></p>
</td>
<td style="text-align: right;"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png" ><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
P.S. you might think you can just add "display:block" to the images, but Outlook doesn't let you do that. It will just ignore that style.
Related
After doing research I'm coming to the realization that this might not be possible in all clients but I wanted to ask if anything has changed recently in the email world that would let me create something like in the image below. I want that little blue ribbon with text to appear on top of the image. From what I've seen it doesnt look like negative margins or absolute positioning has the support I need. Is there some hacky workaround people have come up with for something like this?
As pointed out by others...
You could use the VML option, however the padding used to push the tab down could vary between email clients, so definitely worth testing out.
A set height on a table cell and using vertical align bottom could be another method to test, but personally I always stick to padding as it's always been solid for me.
Although I should note... I don't think I've ever had to align something to the very bottom of a bg image. I'm usually centering or padding elements from the top of the image.
Good place to start though:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td background="https://via.placeholder.com/359x174" bgcolor="#00e5ff" height="174" styke="width:100%;max-width:359px;height:174px;" valign="top" width="359">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:359px;height:174px;">
<v:fill type="tile" src="https://via.placeholder.com/359x174" color="#00e5ff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:139px 0 0 0;">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#2979ff" style="font-family:arial, Helvetica, sans-serif; font-size:15px; line-height:20px; font-weight:600; color:#ffffff; padding:8px 15px; border-radius:0 7px 0 7px;">
Earn $10 off
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
I'm making email template and need to place text in center of the image. I've tried this solution (Table align RIGHT within VML textbox???), but my image can't be displayed.
Here is my code:
<div align="center" style="margin: 0; padding: 0;">
<table border="0" cellspacing="0" cellpadding="0" width="80%" style="width:45em;padding:0;margin:0;border-spacing:0;">
<tbody>
<tr>
<td valign="bottom" height="300" background="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg" style="background-size: 100% 100%;height:15em;text-align: center;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 700px; height: 250px;" src="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 700px; height: 230px;">
<v:fill opacity="0%" color="#111111" />
<v:textbox inset="250px,180px,0px,0px" style="mso-text-scale: 26px; mso-fit-text-to-shape: false; ">
<![endif]-->
<div align="right">
<h1 style="color: #fff; text-transform: uppercase; font-size: 2em;margin-bottom: 1em;">|||Some text in caption here|||</h1>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</tbody>
</table>
It displays good for some certain Outlook window size, but how can i fix the text horizontaly in the center???
If we talk about horizontal center then you need to put table with centered cell inside <v:textbox> tag. Like this:
<!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill type="tile" src="/path/to/image" color="#343434" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" align="center" style="text-align: center;">Centered text</td>
</tr>
</table>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
The background property is not supported in Outlook as it is hown in the markup (only when there is a URL):
<td valign="bottom" height="300" background="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg" style="background-size: 100% 100%;height:15em;text-align: center;">
You can specify a background color, but not an image URL.
The fact is that Outlook uses Word for rendering message bodies. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
I'm coding up HTML emails. I have a td containing a background image. It renders in all major email clients bar Outlook on Windows. I opted to use http://backgrounds.cm/ as a workaround. My issue is the images height and width do not correspond to the values entered. The image appears squashed. I am using it as part of a nested table.
<td class="full" width="300px" style="width: 300px;">
<table>
<tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" bgcolor="#7bceeb" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
<v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="width: 200px; height: 200px;">
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</tr>
<table>
</td>
I am trying to make it work now.
It looks like the default for the image itself is 567 x 341.
i think this may work
<td class="full" width="300px" style="width: 300px;">
<table>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" width="200" height="200" bgcolor="#7bceeb" valign="top">
<tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
<v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="width: 200px; height: 200px;">
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</tr>
<table>
A more robust method would be to use the CSS 'background-image' property - the HTML attribute 'background' still works, but it is technically depreciated. The background attribute also doesn't allow you to resize images, so that might be the problem that you are seeing.
Personally, this is how I usually approach it:
<td align="center" style="background-image: url('http://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: your-colour;"></td>
The other properties are to stop the background image repeating, position the image top and center, and stretch it out to cover the allocated space - the 'background-color' property is just a fallback colour for if images aren't automatically rendered, to maintain an overall design aesthetic.
There's a great litmus article on this here:
https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email
Hope this helps!
I'm having an issue with Outlook (surprise) and having a background image in a table cell.
Now the problem is I can get it to work in 99% of Outlook versions except however, the desktop version of 2016 running on Windows 10.
Here is the code for the block:
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top; width: 640px;" width="640">
<tr>
<td class="w-full" background="http://via.placeholder.com/640x320" bgcolor="#7bceeb" width="640" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1280px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table align="" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top;" width="640">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
<tr>
<td height="35" style="text-align: center;"> </td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<div style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #ffffff; text-transform: uppercase;"> <font face="'Century Gothic', Helvetica, Arial, sans-serif"><span style="font-size:44px;">Lorem Ipsum</span><br>
<br>
<span style="font-size:24px;">SOME TEXT HERE<br>
with a page break here</span></font>
<br>
<br> </div>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style=" font-family:'Century Gothic', Helvetica, Arial, sans-serif; font-size:14px; color:#ffffff; text-transform: uppercase; font-weight: bold;"> CTA Text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
and that will produce this result:
2016 Desktop
However, it kills the other versions:
All other versions
If I reduce the VML width from 1280px to what it SHOULD be (640px) it fixes all the other versions but, only gives me half an image in the desktop client (basically the polar opposite).
Now my understanding is that this desktop client is probably rendering at a higher DPI/resolution, hence why doubling the width gives me the correct result and the actual width gives me half a cell.
My question is, is there a work-a-round/hack that will allow me to display at double width in that client and have the others ignore this rule?
Any help would be appreciated as I can't find a shred of info anywhere, thanks in advance.
After a week of hunting, I came across this article that addresses the issue I was having:
Solving DPI scaling issues with HTML email in Outlook
It was very clear on why it breaks and how to counter it so I would highly recommend checking it out to fully understand the issue.
However, If you're in a rush and just want the code for a quick fix, you'll need to insert the following code in to the HTML tag of your template:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
This tells Outlook what to expect
You'll then need to insert this code into the HEAD section of your template just before the close:
<Head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</Head>
and finally, as before (see original question), you'll need to tell the cell exactly what it needs to do with something similar to:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
Obviously, tweak as you need to for your own emails but, this worked for me.
I hope this answer helps others as it helped me when it boils down to DPI scaling on newer machines with higher resolution monitors!
Full credit to "James" for this solution.
We've been making an HTML Email with a background image in the header and some text over it. We got into some trouble to make it happen but looks like I managed to make it look in most readers though some Outlook ones didn't display the image as expected but that could be acceptable.
What I found interesting is that there doesn't seem to be any way at all to display a background image on Hotmail/Outlook.com/MSN reader. I've been using litmus.com to verify and preview and a code analysis gives me this info:
background-color is unsupported
background repeat is unsupported
background position is unsupported
background url is unsupported
background is unsupported
So while I can read some answers around Stackoverflow saying you can make it work on Hotmail using the full "background" property as Hotmail has turned into outlook.com I have the feeling such thing isn't supported anymore?
I've also used this code to display it on Outlook (I think):
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
The piece of code where we have the header looks like this:
<!-- Header -->
<table style="background-color: #00a8e2; position: relative; left: 0px; top: 0px;" class="full" align="center" bgcolor="#00a8e2" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background: #00a8e2 url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat center top; background-size: cover;" id="BGheaderChange" align="center">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<!-- Wrapper -->
<table class="mobile" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!-- Nav Mobile Wrapper -->
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" width="100%">
<!-- SORTABLE -->
<div class="sortable_inner ui-sortable">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="100" width="100%"></td>
</tr>
</table><!-- End Space -->
<!-- Text -->
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="font-size: 47px; color: #ffffff; text-align: center; font-family: Helvetica,Arial,sans-serif; line-height: 50px; font-weight:bold; vertical-align: top;" class="font32" align="center" width="100%">
<p cu-identify="element_0033719102905743314">
<span style="color: rgb(255, 255, 255); font-weight: 900; " class="font40"><span style="font-family: 'Arial'; font-weight: bolder; word-break: break-word; letter-spacing: 1.3px;"><strong>The title of the email!!</strong></span></span>
</td>
</tr>
</table>
<table cu-identifier="element_07614343859779409" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="20" width="100%"></td>
</tr>
</table>
<!-- Button -->
<!-- End Button -->
<div style="display: none;" id="element_0016519852050701167"></div><!-- End Space -->
<table cu-identifier="element_006155826625549221" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10" width="100%"></td>
</tr>
</table><div id="element_049618199923274187" style="display: none;"></div><div id="element_049618199923274187" style="display: none;"></div><!-- End Space -->
</div><!-- End SORTABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper -->
</div>
<!--[if gte mso 9.]>
</v:textbox>
</v:fill></v:rect>
<![endif]-->
</div>
</td>
</tr>
</table>
<!-- Header End -->
We bought a template to do this and are trying to modify it, the template included a background image but on testing it on different readers looks like not even the default template does it right :( (In fact I've had to be fixing it around and now looks acceptable in most readers but Outlook.com)
Thanks a lot for any help :)
Well, after some more research I found that not any single company sending me a campaign email was using background images (including companies like Amazon, the BBC, or many others with plenty of cash and incredible frontenders) which gave me a good guess that using background images on HTML Emails may not be a good approach.
I'm not sure if there is any way to make them work in Hotmail/MSN Live/Outlook.com as Litmus says it's not supported atm (March 2015) but we decided to change the design and make it work without background images.
We can still use images, just making sure we don't need them to be on the background. That was our final solution.
Thanks to those who spent their time trying to help though :)
Your code looks good to me, this is a snippet from one of my emails which works across all platforms.
<td background="hero2.jpg" bgcolor="#c8c7bc" width="600" height="294" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:294px;">
<v:fill type="tile" src="hero2.jpg" color="#c8c7bc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellspacing="0" cellpadding="0">
<tr>
<td width="598" height="293" style="text-align:left;">
<table width="400">
<tr>
<td style="padding: 30px 32px;">
<p style="font-size:36px; color: #575858; margin:0;font-family: arial, serif;">Secure your<br/>online identity</p>
<p style="font-size:26px; color: #575858; margin:24px 0 18px;font-family: arial, serif;">#DOMAINNAME# is publicly available now</p>
<a style="font-size:17px; color: #575858; margin:0;
font-weight:bold;
text-decoration:none;
padding: 6px;
border: 2px solid #575858;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: arial, serif;
" href="#"><img align="absmiddle" style="border-style: none;" src="lock2.png" alt="" /> SECURE IT NOW WITH UK2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>