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%;
Related
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>
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.
<!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.
Using html code along with VML(for background images) to send newsletters to the customers. Before using VML inline CSS worked fine, but when VML is added to the code, it stopped working in OUTLOOK.
<!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 charset="utf-8" name="viewport" content="width:50" />
<title> Transaction Alert from KVB </title>
</head>
<body>
<div>
<table style="border:1px solid black" width="600" height="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- Backup background color is #DDDDDD -->
<td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left">
<!--[if gte mso 9]>
<v:rect style="width:600px;height:600px;" strokecolor="none">
<v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:600px;height:600px;">
<![endif]-->
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center>
</a>
<div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center>
<font face="Verdana">A.MESSAGE</center>
</font>
</div>
<p>
<font face="Verdana" size="1">
<center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font>
</center>
</p>
<br><br><br><br>
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center>
</a>
<br>
<br>
<p>
<font face="Verdana">With Regards,</font>
</p>
<p>
<font face="Verdana">Karur Vysya Bank.</font>
</p>
<hr width=1 00%>
<br>
<div style="max-width:auto; word-wrap:break-word;">
<font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font>
</div>
<p>
<font face="Verdana"> This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable)</font>
</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
</div>
<body>
</html>
I am especially getting issue at this block
<div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center>
<font face="Verdana">A.MESSAGE</center>
</font>
</div>
Please help me out, I am adding the screenshot for your reference
I have solved the problem by removing the div tag and replacing it with a table
I am providing the complete code
<!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 charset="utf-8" name="viewport" content="width:50"/>
<title> Transaction Alert from KVB </title>
</head>
<body>
<div>
<table style="border:1px solid black" width="600" height="800" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<!-- Backup background color is #DDDDDD -->
<td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left" >
<!--[if gte mso 9]>
<v:rect style="width:600px;height:900px;" strokecolor="none">
<v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:600px;height:900px;z-index:3;">
<v:textbox inset="0,0,0,0">
<![endif]-->
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center>
</a>
<!------THIS IS THE PART WHERE I HAVE DONE THE MODIFICATION-->
<table width = "100%" border-collapse: separate; border-spacing: 0;>
<td STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center><font face="Verdana">A.MESSAGE</center></font></td>
</table>
<p><font face="Verdana" size ="1"><center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font></center></p>
<br><br><br><br>
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center>
</a>
<br>
<br>
<p><font face="Verdana">With Regards,</font></p>
<p><font face="Verdana">Karur Vysya Bank.</font></p>
<hr width = 100%>
<br>
<div style="max-width:auto; word-wrap:break-word;"><font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font></div>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td></tr>
</table></div>
<body></html>
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>