I've looked at the question at background image on TD in Outlook 2007. I can't get a background image to display in a td element.
I've also looked at http://www.campaignmonitor.com/forums/viewtopic.php?id=3862 and tried it but no joy.
Only a fragment of my code:
<td height="100%" valign="top" background="myimage.gif" alt="" bgcolor="#FFFF00">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior: url(#default#VML); display:inline-block;width:51px;height:10px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="myimage.gif" />
<![endif]-->
... td contents...
</td>
Any ideas?
take out the inline behavior and display on the vml element (nice try, I tried that one too) and make sure this is in your header:
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">v\:* { behavior: url(#default#VML);}</style>
<?xml:namespace prefix = v />
</head>
I hope this saves someone the ~8 hours it took me to find
I eventually got around this by increasing the height of the image accordingly to make it fit. I didn't use VML at all.
Related
I'm trying to make a responsive email template that works with outlook. The outlook HTML works fine and the responsive HTML also works fine.
I've made use of media queries for the responsive portion, but now whenever an email is sent to Outlook the content is duplicated.
My HTML is set up as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<style> //Media Queries are here </style>
</head>
<body>
<!--[if gte mso 12]>
//All of the Outlook HTML is held here
<![endif]-->
<!--[if gte mso 12]>
<div style="width:0px; height:0px; overflow:hidden; display:none;
visibility:hidden; mso-hide:all;">
<![endif]-->
//All of the none Outlook HTML is held here
<!--[if gte mso 12]></div><![endif]-->
</body>
</html>
What I want to happen is that the top portion will run whenever an email is sent to outlook and if it's any other client to use the other portion of HTML.
I know this isn't the best way to do this as really I should just show and hide portions of the code instead of the whole thing, but this was easier to put together.
Interestingly this only started occurring when I started making use of media queries instead of stating the same VW for all resolutions.
Any help would be appreciated.
So my solution to this problem was to add style="mso-hide:all" onto every tag that was held within the second block.
Use mso-hide:all in portion you want to hide for outlook, which makes the portion hidden for Outlook specific client.
I'm trying to get a circular image to appear in an HTML email. So far it's working in all clients except for Outlook 2013 and Outlook 2016 (Windows 7).
I found some VML tutorial that says this should do the trick:
<v:oval style="width:100;height:100">
<v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
<v:/fill>
</v:oval>
However I tried it with conditional comments
<!--[if !mso]><!-- -->
<v:oval style="width:100;height:100">
<v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
<v:/fill>
</v:oval>
<!--<![endif]-->
and nothing appeared.
Anybody have a working solution? Border-radius is doing the trick for every othe client but Outlook, because of course...
I'd suggest changing your Outlook conditionals to this.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Currently, you are hiding it from Outlook. If the VML proves too troublesome I'd recommend using a rounded image asset on a transparent background.
I have a client that would like the attached to be built (I've blocked some information out so it doesn't look great).
Basically, they would like the two circles area's "New for 2016" and "From £11.59*" to be text. I know with HTML emails the text can't be on an angle but can anyone else see any other problems as to why this won't work for HTML email build?
Email
It has a number of elements that are graphical and difficult to represent in an email.
The circles and the angled text, as you correctly pointed out are two of them.
Also, if you'd include images most clients normally don't immediately load them but require user confirmation, making it look very ugly at first (this is the argument that always catches with marketing).
Thirdly, was designed as a text medium and most HTML is often included (warning, opinion following) just due to people being to lazy to think about a good text email which is usually the better choice.
You can layer text or foreground images over a background image. backgrounds.cm is the best tool to do this. Here is an example:
<td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
<v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!-- Your content goes here -->
<img src="">
<br>
Text Text Text
<table> more layouts </table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
You'll have to be creative to achieve the design linked above, but in principle you should be able to achieve this (or something close to this) in most email clients.
When I'm adding a backgorund to email template table, all of email clients are blocking this image. How to add an image ? Domain with SSL maybe?
Background images aren't supported in some email clients. Luckily there's a workaround for most. It sounds like you want an image as a background to a specific table cell. If so, use this code, replacing "image.jpg" for your actual image.
Note: You will need to input your image twice in the code below (once in the <td> and once in the <v:rect>
<table>
<tr>
<td background="image.jpg">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" src="image.jpg" color="#0c0807" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
*YOUR CONTENT OR MORE TABLES GO HERE*
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
This code makes your table cell house the image. Set heights or widths to suit the image. The additional conditional statements below force the image to be shown in Outlook, one of the most unreliable email clients to support background images.
Designing emails that will look nice in all email clients is very time consuming and difficult. GMail is especially difficult. Here is a list of css elements and their compatibility. It's a great reference and I reference it each time I am designing a new email template. It's best practice to use only tags which are supported by all clients or email services.
background-image is not supported in: Outlook 2007, Outlook 2010, Outlook 2013, and Outlook.com. However, background is fully supported (excluding image).
I'm trying to put a background image on a table cell in outlook 2013.
I used this from campaign monitor : https://backgrounds.cm/ . It's supposed to work with clients working with the word html engine : outlook 2007, 2010 and 2013.
I got this code and tested it on emailonacid (only this code, nothing else) :
<table>
<tr>
<td background="http://www.stampready.net/dashboard/editor/user_uploads/zip_uploads/2015/11/25/uGNU4M0pzfWehDAXEvq5V6y7/stampready/images/s2_bannerbg.jpg" bgcolor="#0193F9" width="800" height="450" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:450px;">
<v:fill type="tile" src="http://www.stampready.net/dashboard/editor/user_uploads/zip_uploads/2015/11/25/uGNU4M0pzfWehDAXEvq5V6y7/stampready/images/s2_bannerbg.jpg" color="#0193F9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Now let's see the results on https://www.emailonacid.com
As you can see it works perfectly fine on 2007 and 2010, but to my disbelief it won't work on outlook 2013 even with many tries to debug it.
Maybe someone faced that problem before.
edit : as for the duplicate matter, my question concerns a problem where the background image works in 2007/2010 but NOT 2013. This is indeed unique on stack overflow so it is not a duplicate
Test this in an actual version of Outlook 2013. It should display the image.
Tools like Email on Acid and Litmus are essentially virtual machines. Depending on the day or time, their software could capture a screenshot before the email's images have downloaded. + It takes longer to download and display an image using MS's icky VML code.