I am using Microsoft Flow to send an email that should have image as a background. So I created following code
<html> <body> <div style="width:100%, heith:100%">
<div style= "position:fixed ; width:500px; height=500px; top:1%; left:1%; ">
<img src="data:image/jpeg;base64,#{outputs('GifFile')?['body']['$content']}" alt="My Background" width="500" height="600"> </div>
<div style= "position:fixed ; top:5%; left:5%; ">
CONTENT <br/> More Content </div>
</div>
</body>
<html> <body>
but in outlook (for Microsoft 365) it still shows text under the picture, where if I save the message source as html file - it shows text over the image, just as expected.
Also tried another code:
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body>
<div style="background:0 0/cover;background-image: url('data:image/jpeg;base64,R0lGODlhAwG2APeL ** Image code in here ** IBLAJCAA7') ;background-repeat:repeat;background-color:#ffffff;background-position:center;">
<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
<v:fill type="tile" src='data:image/jpeg;base64,R0lGODlhAwG2APeL ** Image code in here ** IBLAJCAA7' color="#ffffff"/>
</v:background>
<![endif]-->
<div>CONTENT <br>
More Content</div>
</div>
</body>
</html>
Any ideas how to show text over image in an email?
Thanks
The Outlooks on Windows don't support background images. But you can use VML to mimick the feature. If you want a background applied to your entire window, the code should be as follow:
<div style="background:0 0/cover;background-image:url('https://www.example.com/image.jpg');background-repeat:repeat;background-color:#ffffff;background-position:center;">
<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
<v:fill type="tile" src="https://www.example.com/image.jpg" color="#ffffff"/>
</v:background>
<![endif]-->
<div>CONTENT <br/> More Content</div>
</div>
Also, prefer linking to a hosted image instead of embedding an image in Base64. You can check detailed support in email clients for background-image and Base64 Images on Caniemail.com.
Word (whcih renders emails in Outlook) does not support background images in the body. Try to use a table instead.
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 validated my website using: https://validator.w3.org/#validate_by_upload
and I got no errors. However, the website recently changed and now I get these 2 messages:
Info: The Content-Type was application/octet-stream. Using the XML parser (not resolving external entities).
Fatal Error: Empty document, with no root element.
What do these messages mean? How do I correct the error?
The settings I used were: Encoding: utf-8 document type: HTML5
SIMPLE HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<hr>
<footer>Footer</footer>
</div>
</body>
</html>
It could be because you have opening tags that are not closed. I put your code in to the checker and it complained about the body element being found before the div is closed:
<body>
<div class="container"> <!-- no closing tag for this div -->
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<div>
<hr>
<footer>Footer</footer>
</div>
</body>
Message filtering
Info: The Content-Type was text/html. Using the HTML parser.
Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support.
Error: End tag for body seen, but there were unclosed elements.
From line 27, column 1; to line 27, column 7
Error: Unclosed element div.
From line 17, column 1; to line 17, column 23
Fix that and rerun the tests.
This is an issue when using the old w3 validator and Safari as the uploading Browser; If you upload using Chrome it should work fine, or if you cut and paste it should work fine. Also, if you upload using Safari to the "new school" validator it will work as well.
http://html5.validator.nu/
It looks fine but some tags need to be closed like your hr's
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr />
<div>
<p> TEXT </p>
</div>
<hr />
<footer>Footer</footer>
</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>
I positioned links on one image which has 3 buttons, (something like this).
The positioning works with Firefox and Chrom, but with my "favorite" IE(11).. well.. I see the link on the image as an invisible very small character. If I was a user, I wouldn't notice it and think the link isn't working.
I can't publish my real code, but I will change the names in it.
HTML (there is a "lps" class div before this code):
<img src="http://example.ag/nts/images/category/subcat/btns.jpg" style="margin-top: 25px;
margin-bottom: 35px;">
<div class="promotioncontent">
<a class="how modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3>WORK</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/work.jpg">
<a class="openprize opennext" href="#"></a>
</div>
</div>
</div>
<a class="prize modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3> TABLES</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/tables.jpg">
<a class="openfaq opennext" href="#"></a>
</div>
</div>
</div>
<a class="faqs modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3>FAQs</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/FAQ.jpg">
</div>
</div>
</div>
</div>
Only the relevant CSS:
.lps a.how {
right: 50%;
margin-right: 189px;
}
.lps a.modal_link {
position: absolute;
bottom: 70px;
display: block;
width: 233px;
height: 76px;
text-decoration: none;
}
What can be the cause of the problem and how can I fix it without ruining it on the Firefox and Chrome browsers?
Answer to accept
Instead of placing invincible elements over sprite image, use background-image as that sprite and just change background-position for each element. That way you can put any size spacing between elements, no matter of spaces between sprite images.
use a different stylesheet for IE support without ruining other browsers layout in head tag
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>
<!--[if gte IE 8]>
<style>
body
{
background:Red;
}
</style>
<![endif]-->
<!--[if gte IE 7]>
<script>
alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
</script>
<p>Thank you for closing the message box.</p>
<![endif]-->
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">