I'm coding up HTML emails and am trying to get a background banner image to render somewhat correctly across Outlook 2010, 11, 13, 16. Using this currently - http://backgrounds.cm/.
My issue is that Outlook 2010 and 2013 seem to zoom in on the background image.
My code:
<td background="https://someKitten.jpg" width="600" height="185" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:185px;">
<v:fill type="tile" src="https://someKitten.jpg" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
this seems to be a known issue but I'm not coming across any fixes. https://www.campaignmonitor.com/forums/topic/7953/bulletproof-background-images-enlarging-in-outlook/
and...fixed.
for anyone else struggling with this issue, set fill type to "frame"
<v:fill type="frame" src="https://someKitten.jpg" />
Related
I have an template email, it actually working with Outlook from Office 2013, 2019 and 365 but i have an issue with Outlook Exchange 2016 : The <!--[if mso]> condition is not apply.
This the the code that is not apply :
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: 'Montserrat', sans-serif;
color: black !important;
}
</style>
<![endif]-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
<v:fill type="tile" size="100%,100%" src="cid:{{ myBackground }}" color="#fff"/>
</v:background>
<![endif]-->
I don't understand why this doesn't work on this specific version of outlook :(
Does anyone has the answer ?
Using the example from 'bulletproof backgrounds' doesnt work for me on outlook clients.
Is there any way to do this for outlook or is it just a straight up no?
Heres my code for reference. (some things i have tried)
<!--[if gte mso 9]>
<v:background fillcolor="red">
<v:fill type="gradient"/>
good day
</v:background>
<![endif]-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
</v:background>
<![endif]-->
Your first example is missing the xmlns:v attribute, as well as the fill="t". Here’s a full working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VML Example</title>
</head>
<body>
<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true" fillcolor="red">
<v:fill type="gradient"/>
</v:background>
<![endif]-->
<p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Culpa, saepe?</p>
</body>
</html>
Your second example works right out of the box for me (as, I presume, it comes from backgrounds.cm). Please note though that VML is only supported on the Outlooks on Windows. And <v:background> is not supported in dark mode.
I built an HTML block with a personalized code in the email and I would like to know why the text is displayed twice when opening the email in Outlook from a desktop device, only when using Windows OS.
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;v-text-anchor:middle;width:218px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#1672b9;font-family:'Noto Sans', sans-serif;font-size:12px; letter-spacing:1.5px; font-weight:bold;border-radius: 15px;">Personalized code</center>
</v:rect>
<![endif]-->
<a style="background-color:#ffffff;border-radius: 15px;color:#1672b9 !important;display:inline-block;font-family:'Noto Sans', sans-serif;font-size:12px;line-height:44px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all; font-weight:bold; letter-spacing:3px;">Personalized code</a>
Use this:
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;v-text-anchor:middle;width:218px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#1672b9;font-family:'Noto Sans', sans-serif;font-size:12px; letter-spacing:1.5px; font-weight:bold;border-radius: 15px;">Personalized code</center>
</v:rect>
<![endif]-->
<![if !mso]>
<a style="background-color:#ffffff;border-radius: 15px;color:#1672b9 !important;display:inline-block;font-family:'Noto Sans', sans-serif;font-size:12px;line-height:44px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all; font-weight:bold; letter-spacing:3px;">Personalized code</a>
<![endif]>
See also: "How do I make an “else” in an IE HTML conditional?".
I have created a button in HTML for outlook with CSS styling:
<!--Join Meeting Button-->
<tr>
<td colspan="2" align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${meetingUrl}" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="50%" stroke="f" fillcolor="#ad122a">
<w:anchorlock/>
<center>
<![endif]-->
Join Meeting
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
And it looks fine in the draft email, but when I send the email, the Join Meeting Button is displayed as an image, as if converted, and the link does not work. The link works fine in the draft email using CTRL + Click.
Is there a way to prevent this?
Outlook desktop apps convert buttons into image.
please your following code for perfect style of button on every email client.
<!--[if mso]><a href="${meetingUrl}" target="_blank">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" stripoVmlButton href="${meetingUrl}"
style="height:41px;v-text-anchor:middle;width:131px;" arcsize="61%" stroke="f" fillcolor="#ad122a">
<w:anchorlock></w:anchorlock>
<center style='color:#ffffff;font-family:arial, "helvetica neue", helvetica, sans-serif;font-size:14px;font-weight:700;'>Join Meeting</center>
</v:roundrect></a>
<![endif]-->
<!--[if !mso]><!-- --><span class="msohide es-button-border" style="border-radius: 0px; border-width: 0px; background:#ad122a; border-color: #ad122a;"><a class="es-button" href="${meetingUrl}" style="font-size: 17px; font-weight: bold; border-radius: 25px;" target="_blank">Join Meeting</a></span>
<!--<![endif]-->
Or you can use this site to create buttons https://buttons.cm/
when i send a same email to Gmail and outLook
its work perfectly on Gmail but in outLook its not showing background-image of div
Outlook supports background images and it's using VML. VML (vector markup language) is native to outlook. Below is the code you can use:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[WIDTH]px;height:[HEIGHT]px;">
<v:fill type="frame" src="[IMAGE PATH]" color="#[FALLBACK COLOR]" />
<v:textbox inset="0,0,0,0">
<![endif]-->
[HTML CONTENT HERE]
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->]]>
All you need to do is change the height and width of the VML, add in the image path and you are good to go. Be sure to place this inside a table with a specific width or you will have tiled images.
Cheers