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
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'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" />
I have the following html, if i open it up on browser it works fine..but when i send it as a mail to my outlook 2013, i dont see the background..
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body style='background-image: url("http://postimg.org/image/t6abf7srn/");background-repeat:no-repeat'>
</body>
</html>
I have tried options 1 and 2 given at this link : http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth
Have tried the solutions at below link as well:
1) http://blog.mailermailer.com/email-design/bulletproof-email-background-images-fact-or-fiction
2) http://backgrounds.cm/
but no luck.
Just adding my VML addition as well, which doesnt seem to be working too:
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Untitled Document</title>
</head>
<body style='background-image: url("http://postimg.org/image/t6abf7srn/");background-repeat:no-repeat'>
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="http://www.example.com/background_image.jpg" />
</v:background>
<![endif]-->
</body>
</html>
HTML in Outlook is rendered by Word, not IE. And Word does not support background images in HTML.
you are pointing to a document, not an image file in your css. add the image's url instead, like this:
<body style='background-image: url("http://s21.postimg.org/ko0vavm93/image.jpg");background-repeat:no-repeat'>
however like #Dmitry Streblechenko said about support, i know outlook reverted back awhile ago and stopped supporting them. not sure about 2013 support.
i would slice that image into table pieces :)
are you sure you've added the vml xmlns into your html tag?
<html xmlns:v="urn:schemas-microsoft-com:vml">
I haven't had trouble with the snippet CM provided (placed at the top of the body)
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="http://www.example.com/background_image.jpg" />
</v:background>
<![endif]-->
EDIT!!
Turns out you don't even need VML for outlook body backgrounds.
<body style="margin:0px; padding:0px;" bgcolor="#0088cc" background="http://imagez.biz/bkg.png">