I want to create a newsletter with a background image/frame and I was wondering what is the best way to do that. If you have any suggestions please share.
The background image is here
This is the code that I manage to write so far but I can't find a way to center the td and also I will have to add on top of the image text and logos. Would that be possible and if it is, would it be compatible with most of the email clients used like outlook or gmail?
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:#ffffff;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://i.imgur.com/xRYqx1Y.png" color="#7bceeb"/>
</v:background>
<![endif]-->
<table align='middle' height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" repeat="none">
<tr>
<td align='middle' valign="middle" style="background-repeat: no-repeat; text-align: center;" background="https://i.imgur.com/xRYqx1Y.png">
</td>
</tr>
</table>
</div>
</body>
</html>
Like everything in email design and development, background images
have mixed support across email clients. Most clients support one
techniques described below, the most notable exclusions being
earlier versions of Android, some Gmail clients, and some of the
webmail clients, which vary greatly depending on which browser is
used.
The closer we can get is by using BULLETPROOF BACKGROUNDS
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td background="https://i.stack.imgur.com/qNm7c.png" bgcolor="#7bceeb" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://i.stack.imgur.com/qNm7c.png" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
test
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
But even in that, we have limitations in some major clients like Gmail Chrome for more details read this article from JASON RODRIGUEZ.
Add class to your table. Then in CSS file use the code like this
.class{background-image:URL(/image.png) no-repeat;}
Related
I'm moving images from publicly hosted site to my Visual Studio project. After doing so, the VML images (<v:image />) are not loading anymore.. The image url is something like /images/my-image.png, which works as expected when using simple <img /> HTML element. The email structure is made like this, because the requirement is to show dynamic text over image.
I checked the email body using PapercutSMTP and the links are correct. I tried also to hard-code them, but no luck.
Note: I'm testing locally, but the same happens also on test environments. I'm focusing on Outlook, Gmail, IE.
My code:
<td class="emailnomob" align="center" valign="middle" background="<%=HeaderBackgroundImageUrl %>" bgcolor="#dddddd" style="background-image:url('<%=HeaderBackgroundImageUrl %>');background-size:100%;background-repeat:no-repeat; width:600px; height:300px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px; height:300px;" src="<%=HeaderBackgroundImageUrl %>" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position: absolute; width:600px; height: 300px;">
<v:fill opacity="0%" color="#f7901e" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="560" cellpadding="0" cellspacing="0" border="0" align="center" style="width:560px;">
// My text over image here
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
I fixed this issue by adding Content identifier (cid) inside :url () and src="" attributes.
<td class="emailnomob" align="center" valign="middle" background="<%=HeaderBackgroundImageUrl %>" bgcolor="#dddddd" style="background-image:url('cid:my-image.png');background-size:100%;background-repeat:no-repeat; width:600px; height:300px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px; height:300px;" src="cid:my-image.png" />
...
</td>
It is quite old approach to embedd images inside an email.
More information about the implementation details here Stackoverflow post
I cannot wrap my head around it. I created a html Mail. In order to send it I open the html file in Google Chrome and then I copy paste all into the new email.
Now there are three Scenarios:
When I copy paste it into Apple Mail, send it via Apple Mail and then open the Mail in Outlook (Latest Version of Outlook for Mac) it works perfectly fine and the background image is shown.
When I copy paste it into Outlook to send the Mail the background image isn't shown at all.
When I forward the Mail from Scenario (1) the background image gets lost again and is not shown.
How is that possible? Scenario (1) kind of shows that Outlook is able to show the background image and that the Code is correct but why can i not send it using Outlook?
I tried:
I am using the "Bulletproof background" method from https://backgrounds.cm/
I tried using http instead of https in the Linka for the background images but that didnt help
In the first Tag I tried both background and background-image in the inline CSS.
Setting a fixed height for the VML.
<td background='https://link/bg-img.jpg' bgcolor="#000000" width="600" valign="top" style="background-image:url('https://link/bg-img.jpg'); background:url('https://link/bg-img.jpg'); background-position: top; background-repeat: no-repeat; background-size: cover;">
<!--[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="https://link/img.jpg" color="#dadada" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table id="header" cellspacing="0" cellpadding="30" width="600"
style="mso-cellspacing: 0px; mso-padding-alt: 30px 30px 30px 30px">
<tr id="logos">
<td>
<img width="130" style="width: 130px"
src="https://link/logo_one.png">
</td>
<td>
<img width="150" style="width: 150px" align="right"
src="https://link/logo_two.png">
</td>
</tr>
</table>
<table id="header-texts" cellspacing="0" cellpadding="25" width="600"
style="color: white; text-align: center; mso-cellspacing: 0px;
mso-padding-alt: 25px 25px 25px 25px">
<tr id="title">
<td>
<p><b>SOME HEADER</b></p>
</td>
</tr>
<tr id="welcome-text"
style="padding: 30px; margin: 0; background: rgba(0, 0, 0, 0.65);">
<td>
<p>SOME TEXT.</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
Ok, so I'm trying to create a simple as you like single column html email template.
The issue that I'm having is that I can not seem to get rid of the white boarder that surrounds the message when I paste the html code into my email client to sent a test message.
I've set the css of the bodyto an inline and this works perfectly when I test in the browser, there is no white boarder or margin....
<body style="margin: 0px; padding: 0px; background-color: #000000" bgcolor="#000000">
....but when I come to paste the code into the mail client (I use Mac Mail as my default) to send a test mail, I keep getting a white boarder all around the message and CAN NOT work out how to get rid of this.
I've looked at an html email that I received with full width background color and tried to work out what that does that I'm not but can't see anything different, so am I just missing something real simple here??
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- 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 -->
</head>
<body style="margin: 0px; padding: 0px;" bgcolor="000">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/q16jgdtr/
You've misspelled bgcolor attributes. It should be a valid color.
E. g. bgcolor="#ffffff;" should be bgcolor="#ffffff" -- without a semicolon.
And bgcolor="000" should be bgcolor="#000000".
https://jsfiddle.net/q16jgdtr/3/
https://www.w3.org/TR/html4/index/attributes.html
I have a feeling it's because you missed the following on the table that contains the contents of the email.
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;" border-collapse="collapse">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
I have added border collapse, cellpadding, cellspacing and border to zero. Give the above code a try, hope that's what you are looking for.
I would like add background image to mail email. When i test on MailChimp, the preview is good (with inline style and minified).
But if i run test on my mail (Gmail APP and Outlook), i've no background. If i open the mail in browser, my background is show.
I've test with this :
background="http://domaine.com/myimage.jpg"
and
background: url('http://domaine.com/myimage.jpg') !important; // Inline style
No result. Anyone have idea ?
My code for backgrounds in emails after 1,5 years of blood, sweat and tears:
Important to know is that almost everything in this piece of code is important!. From the DOCTYPE, html tag's xml attributes, conditional comments and css in the head,... Just use this as a starting point for your next email.
Important tip:
Use the attr background="" on a td, not on a table or any other element.
<!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>
<!--[if (!mso)&(!ie)]>These<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>are<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>for<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>outlook<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>live<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>that<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>removes<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>the first<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>10 well-formed<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>conditional comments<!-- --><!--<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="og:title" content="mytitle" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mytitle</title>
<style type="text/css">
v\:* {
behavior: url(#default#VML);
display: inline-block
}
o\:* {
behavior: url(#default#VML);
display: inline-block
}
w\:* {
behavior: url(#default#VML);
display: inline-block
}
.ExternalClass{
width:100%;
}
table{
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
img{
-ms-interpolation-mode:bicubic;
}
.ReadMsgBody{
width:100%;
}
</style>
</head>
<body width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<tr>
<td align="center" background="https://i.stack.imgur.com/LCCB6.jpg" bgcolor="#cccccc" width="100%" height="1000" valign="top" style="background-color:#cccccc;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent: 1000;height:1000px;">
<v:fill type="tile" src="https://i.stack.imgur.com/LCCB6.jpg" color="#cccccc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<br /><br />
<div>
<!--[if (mso)|(ie)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" height="100%">
<tr>
<td align="center" valign="top" width="600" height="100%">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" height="100%">
<tr>
<td align="center" height="100%" bgcolor="white">
Content of your email goes here, for widths try to use % procent from now if possible. Start again here with a table
<br />
For outlook you need v:rect code and fixed height set in pixels!<br /><br />
If you just want a block inside this 600px wrapper with a background you do it like this:<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;" height="300">
<tr>
<td align="center" height="300" background="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" bgcolor="#000000" style="color:#fefefe;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;">
<v:fill type="tile" src="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content goes here, for widths try to use % procent from now if possible. (except in v:rect code, use px there) For outlook you need v:rect code and fixed height set in pixels!<br><br>
v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;<br>
<br /><br /><br />
<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
<!--[if (mso)|(ie)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
CSS background does not work everywhere for email. Use the HTML background property instead. E.g:
<table background="image.jpg"...
Here is an example of the code that i have been using for quiet sometime now.
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%; max-width:600px;">
<tr>
<td align="center" height="400" background="[IMAGE PATH]" bgcolor="#000000" style="height:400px;color:#fefefe; background-image: url('[IMAGE PATH]'); background: url('[IMAGE PATH]');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="[IMAGE PATH]" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content here<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Above example is of a hybrid code. I have added two more background image paths in the style tag for the TD which should cater for Lotus notes (or older email clients) and for Gmail.
Let me know how you go.
Although the background images, we apply, may show at maximum no of email clients, but specifically not at the Outlook. So in order to show the email background at Outlook
You can use the Code snippet given below, which will make the bg image visible at Outlook.
Just select the Td at which you want the background image, then paste the below code there and update the background image path.
<td background="your_background_image_path_here">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block; width: 600px; height: 100%;"
src="your_background_image_path_here" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block;position: absolute; width: 600px;
height: 297px;">
<v:fill opacity="0%" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table>
Rest Your Emailer Code Goes Here
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
While creating an html email for Outlook, I stumbled upon a small problem that I have not been able to fix.
Below is a screen shot of an html table. I need to make the whole area clickable and not just the text. When I put <a href="#"> around the <td> or <table> it works in browsers but not in Outlook.
Here is the code:
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
I know this is an old question, but I was looking for an answer to this problem (clickable whole buttons in Outlook) and stumbled upon the following solution:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" >
<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->
</td>
</tr>
</tbody>
</table>
Note I have not tested the above code.
Other answers did link to the campaignmonitor website, but not this link which provided the solution.
That blog post at campaignmonitor mentions that they have created a specific website to generate outlook compatible clickable buttons - http://buttons.cm based on a solution created by Stig M (#stigm on twitter).
I do not work for campaignmonitor.
Hope that helps someone.
try this
http://jsfiddle.net/KrRzP/
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; cursor:pointer;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
Yes please, send me a quote.
</td>
</tr>
</tbody>
</table>
You can try to use the onClick, <td onClick="go to anchor">. In the inline style you should add cursor: pointer so the cursor is changed to the 'hover a link'-pointer.
Try removing the target="_self". As Outlook is a email client, it probably doesn't recognize it and may be causing the issue.
On a side note, If you are using anchor links within your email (linking elsewhere on the same page), this is not fully supported in all email browsers. Here is the support chart
Use JavaScript "innerHTML" property. By default, in HTML5 you cannot directly add an anchor tag in a table cell element.
<html>
<title>
</title>
<head>
</head>
<body>
<table>
<thead>
<tr>
<td>Youtube</td>
<td id="assign_anchor_tag_here"></td>
</tr>
<thead>
</table>
<script>
var td_element = document.getElementById("assign_anchor_tag_here");
td_element.innerHTML = "<a href='https://www.youtube.com'>Click Here!</a>";
</script>