For the purpose of an email template, I need to implement a background image in the <table> and its contain texts over image. Now I have tried:
https://stackoverflow.com/a/15620571/6191987
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
</v:background>
<![endif]-->
Its not working latest versions of MS Outlook (Version 16005.11029.20108.0 & Version 1908 Build 11929.20562),
But working fine with older versions.
Any new method to solve this problem?
Have you tried declaring VML have this in your html tag?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
Also what are the dimensions of your bg img? Outlook has a max img height of 1728px and won't show the image if it is over that.
And it will not show correctly if the bg img is retina.
Found this solution
From: https://litmus.com/community/discussions/357-outlook-07-13-full-width-background-image
This works in Outlook, Office 365, Gmail etc. also in normal & 4k screens.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Test</title>
<style>
v\:* {
behavior: url(#default#VML);
display: inline-block
}
o\:* {
behavior: url(#default#VML);
display: inline-block
}
w\:* {
behavior: url(#default#VML);
display: inline-block
}
body {
margin: 0;
padding: 0;
width: 100%;
-webkit-text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
}
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body style="padding: 0; margin: 0; -webkit-text-size-adjust: none !important;color:#fff;font-family:sans-serif;font-size: 18px;">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#0058a5" width="100%">
<tr>
<td height="50"> </td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="150" bgcolor="#0086cc" background="http://i.imgur.com/HzZCJei.png" style="height: 150px;" align="center">
<!--[if gte mso 9]>
<v:rect stroke="f" fill="t" style="mso-width-percent: 1000;height:150px; position: relative; z-index: 0; mso-width-relative:margin;">
<v:fill type="frame" src="http://i.imgur.com/HzZCJei.png" color="#0086cc" />
</v:rect>
<![endif]-->
Text goes here!
</td>
</tr>
</table>
</body>
</html>
Related
Been trying to follow this article on making future proof responsive email templates:
https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
What I'm working on looks good in most clients, but Outlook isn't rendering some of the background colors.
Should look like this with gray borders (this is in Gmail):
Outlook 2016, however, looks like the following:
Right now I am just trying to get the gray border to show up. Will figure out why the background image isn't later.
Anyway, here is what I have so far. Any suggestions on how to get this gray background to show up the entire width of email body like it does in Gmail?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
<style type='text/css'>
/* Basics */
body {
margin: 0 !important;
padding: 0;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.content {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color: #7E8083;
}
.webkit {
max-width: 902px;
margin: 0 auto;
}
.outer {
margin: 0 auto;
width: 95%;
max-width: 902px;
background-color: #1D428A;
color: #FFF;
}
.content-area {
background-position: center;
background-size: 100% 100%;
}
.footer {
font-size: 10px;
-webkit-text-size-adjust: 95%;
}
</style>
</head>
<body>
<div class="header" align="center">
<table cellpadding="20">
<tr>
<td>
<img src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" width="150" alt="The Company Logo">
</td>
</tr>
</table>
</div>
<div bgcolor="#7E8083" class="content">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="902px" align="center">
<tr>
<td>
<![endif]-->
<table height="381" class="outer" align="center">
<tr align="center">
<td background="https://marketing-image-production.s3.amazonaws.com/uploads/8.gif" align="center" class="content-area">
[content here]
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</div>
<div class="footer" align="center" size="10">
<p>If you would like to unsubscribe and stop receiving these emails
click here. We encourage you not to do so to ensure you receive important emails related to your account.</p>
</div>
</body>
</html>
You can try bulletproof background images:
<td background="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" bgcolor="#1D428A" 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://marketing-image-production.s3.amazonaws.com/uploads/a.gif" color="#1D428A" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
[content here]
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
See: https://backgrounds.cm/
There are a couple of things that we are generally asked that unfortunately are just not possible in Outlook and therefore... Unfortunately Outlook has lots of limitations on it's CSS support.
A good guide for CSS support for the most email clients can be found here: https://www.campaignmonitor.com/css/
Outlook does not really work with <div>. You can use it, but don't be surprised when it doesn't work as expected.
Outlook does not work with background images the way you are using them. #caiovisk has an example that I suggest you pursue.
As far as background colors go, try using: background: #ff0000; instead of background-color: #ff0000;. `bgcolor="#ff0000" should always work on tables. This will also fix your issues with Android.
width="902px" is not going to work. Try `width="902" for Outlook instead. I do not understand why you're specifying a width that is 322 pixels wider than will show up in the Outlook viewport. Consider a narrower email.
My suggestion is to stop developing the way you're pursuing emails. Find a decent responsive email template and follow that as an example. The direction you're headed has so many issues I can see that you're just asking for trouble.
Good luck.
I would like to know how to make a background appears full width in an emailing even without a text. I don't lnow how to make it appear even without text you can see and its real dimensions. I want the result to be similar to this with the text at the bottom like a footer.
Does someone know how to do this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title></title>
</head>
<body>
<title></title>
<div class="email-background" style="padding:10px;background:white;">
<div class="pre-header" style="background:white;font-size:5px;color:white;text-align:left;max-width:500px;">
</div>
<!--BODY-->
<div class="email-container" style="background:white;font-family:Varela Round,arial, sans-serif;color:#03165c;margin:0 auto;max-width:100%;">
<table class="contenu" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="white">
<tr>
<td height="1" style="font-size:1;line-height:1;background:#374b94;"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#374b94" background="https://image.noelshack.com/fichiers/2017/51/4/1513863465-carte2.png" style="background-repeat:no-repeat;background-size:contain;background-position: center; ">
<!--[if !gte mso 9]><!---->
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
<v:fill type="tile" src="https://image.noelshack.com/fichiers/2017/51/4/1513863465-carte2.png" color="#374b94">
<v:textbox inset="0,0,0,0">
<!--<![endif]-->
<tr>
<td>
<p align="left" style="font-family:Varela Round,arial, sans-serif;color:#c6c9dc;font-size:10px;">
Si vous ne souhaitez plus recevoir d'email cliquez <a class="unsubscribe" href="mailto:desinscription#marketing-idxcel.fr?subject=Désinscription&body=Je%20souhaite%20ne%20plus%20recevoir%20de%20mail%20de%20votre%20part" style="color:#c6c9dc;text-decoration:underline #c6c9dc;">ici</a>
</p>
</td>
</tr>
<!--[if !gte mso 9]><!---->
</v:textbox>
</v:rect>
<!--<![endif]-->
</td>
</tr>
</table>
</div>
<!--/BODY-->
</div>
</body>
</html>
To the image style - add height.If you inspect it you can see that it have only width.
background-repeat:no-repeat;
background-size:contain;
background-position: center;
height: 500px;
/** or padding: some value **/
padding-bottom: 40%;
<!doctype html>
<html>
<head>
<style>
#media screen and (max-width: 480px){
#switcher {
display:block;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY2xFICSLTeJuWDALDsvc7YtIAdsNVpDWtRtOaGgPyCaPoGkjUvg') !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 300px !important;
height: 250px !important;
}
}
</style>
<body>
<span id="switcher"></span>
</body>
Above which works in Gmail and Yahoo but not in Outlook and Mail.Ru. Any idea?
background is not supported in Outlook, that's why it's not showing.
What you could do, is using this background image tool to generate a background image that would be shown in Outlook.
Add the following right after the opening <body> tag:
<div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY2xFICSLTeJuWDALDsvc7YtIAdsNVpDWtRtOaGgPyCaPoGkjUvg" color="#7bceeb"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY2xFICSLTeJuWDALDsvc7YtIAdsNVpDWtRtOaGgPyCaPoGkjUvg">
and this right before the closing </body> tag:
</td>
</tr>
</table>
</div>
I hope it's helping you to achieve what you wan't.
I'm trying to write an HTML email. When I run it in Chrome it is at the top of the page, but when I send it in an email there is a lot of white space at the top. Also, it looks very different in yahoo mail and in gmail. Can somebody tell me why? Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important !important;}
</style>
<![endif]-->
</head>
<body style="margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#ffffff;" >
<center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;" >
<div style="max-width:600px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;" >
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<table align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;Margin:0 auto;width:100%;max-width:600px;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
<tr>
<td style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;width:100%;text-align:left;" >
<p style="Margin:0;font-weight:bold;font-size:24px;Margin-bottom:10px;" >Your word for the day</p>
<p style="Margin:0;font-size:14px;Margin-bottom:10px;" >Word in Tajik: Word in English</p>
<p style="Margin:0;font-size:14px;Margin-bottom:10px;" >Part of speech: </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
I had the same problem with Gmail: a lot of blank space at the beginning of the email.
For me the solution was to minify the content before body tag. I minified the content using https://www.willpeavy.com/tools/minifier and it worked.
Looks like you need more of a CSS reset for your email. One rule isn't enough :(
Here is the reset I use in my own emails. This should eliminate the extra space at the top in most clients (Still gonna get a little space in Win Outlook, nothing we can do about that) and negate a few random breakages in clients.
The code is commented so you know what rules do what.
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
</head>
Full code is on GitHub if you want to dive deeper.
I am trying to load two different images in an email based on the screen size the viewer is using.
I have a WordPress ninja form thank you email that I want sent out with an image displayed in the body. If the screen size is smaller than 501px I want image displayed if it is smaller than 500px I want a different image displayed. The difference being one is less text and easier to read on mobile.
I have tried media queries but they do not work for the email formatting. I used them on a test html page to make sure my code was working and it was fine so maybe media queries don't work for email?
Is there another way to change the images based on the size of the screen the email is viewed on?
Here is my code:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='ourStory'>
<img src='http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-mobile-copy.jpg' />
</div>
</body>
</html>
CSS
#media all and (min-width: 501px) {
div.ourStory{
content:url('http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-copy.jpg');
}
}
Responsive Email cannot be achieved properly or even at all with <div> you will need to use <table>
https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/
Services such as mailchimp know about these and have their own built in tool to design email.
http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/
I suggest you use a library such as this one to accomplish a better responsive design for your email.
http://zurb.com/ink/docs.php
Example code:
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr>
<td>
Eight Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td>
Four Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Also many email provider and client doesnt support linked css so you have to rely on inliner tools which will apply style="" attributes to your HTML elements.
As the links say, div can and should be used in email, but the complex layouts require Tables. I personally think a combination is the best course, which I will use in my sample below.
The major issue that jumps out at me is that you have a link tag to the stylesheet (almost universally no support on email clients) and that you use more complex CSS (content:) on the media query (also not well supported).
I created some code using table and div while also updated some css, etc to your above code - including Outlook conditional statements. You would likely need to test this across clients, but this is the best and pretty much only way to do an image swap in email. You can also change the background-image in the media queries if you want to switch it again at a lower screen size.
See below:
.ourStory { width:640px;}
#media only screen and (max-width: 640px) {
.ourStory { width:100% !important;}
.image1 {display:none !important; visibility:hidden !important; overflow:hidden; width:0px !important; height:0 !important; line-height:0 !important;}
.bgimage {width:100% !important; height:100px !important;}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<title></title>
<style>
<!-- Inline Style Sheet Here -->
</style>
</head>
<body>
<div class='ourStory' style="width:100%; max-width:640px;">
<!--[if (gte mso 9)|(IE)]>
<table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="ourStory" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;">
<tr>
<td class="bgimage" background="http://placehold.it/639x100" bgcolor="#7bceeb" width="100%" height="150" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:639px; height:150px;">
<v:fill type="tile" src="http://placehold.it/639x100" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div><img class="image1" width="100%" src='http://placehold.it/640x150' style="border:none; display:block;" />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</div>
</body>
</html>