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">
Related
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.
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'm currently running this code. I also have an external stylesheet that applies all my styles of the page correctly but i'm running in this issue at the moment.
When i call .ie9 as a class in my external stylesheet and want to apply a gradient style to it, it isn't running my code in the Internet Explorer emulation.
However when i run the code not in the .ie9 class the code actually works so i made some mistake somewhere. Perhaps you might know what the issue is here.
HTML Code:
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="nl-NL"> <!--![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS Code:
.ie9 {
.section-example{
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80c9db', EndColorStr='#30aac8');
}
}
The problem was actually different. Internet Explorer 11 emulator does not load conditional html statements for some reason.
May it works for greater than ie9:-
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
or
<!--[if lt IE 9]>
<link href="<?php bloginfo( 'template_url' ); ?>/css/ie9.css" rel="stylesheet" type="text/css" />
<![endif]-->
I'm using some CSS properties that does not support in CSS 2.1. For example, -moz-border-radius, box-shadow, zoom, filter,.... make me fail with the CSS validation.
So are there any techniques to make the CSS validator to ignore them?
For Microsoft Propreitary attributes , you can keep them in conditional comments this way:
<!--[if IE 6]>
<style type="text/css">
/* Use all the non-standard Microsoft Propreitary attributes */
body {zoom: 1; filter: none;}
</style>
<![endif]-->
If you are using stuff in stylesheets, then you can do this way:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
This validates perfectly in W3C. Use this code to check:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<!--[if IE 6]>
<style type="text/css">
/* Use all the non-standard Microsoft Propreitary attributes */
body {zoom: 1; filter: none;}
</style>
<![endif]-->
</head>
<body>
</body>
</html>
Validate by Direct Input: http://validator.w3.org/#validate_by_input
For others, you can set an option for Vendor Extentions to just display warnings in the CSS Validator.
Basically, I'd like to know if this code is okay,
<body id="some_id" <!--[if lt IE 7 ]>class="ie6"<![endif]--> >
</body>
No. HTML comments can't be inside a tag. Try:
<!--[if gte IE 7]>--> <body id="some_id"> <!--<![endif]-->
<!--[if lt IE 7]> <body id="some_id" class="ie6"> <![endif]-->
No, and it's not necessary. Always give the class to the body element and leave the CSS .ie definition empty for all browsers but IE6:
.ie6 {
<!--[if lt IE 7]-->
... ugly ie6 hack ...
<!--[endif]-->
}
</style>
<body class="ie6">
No — comments cannot be inserted inside tags.
No you can not, so you will have to repeat the tag and all its attributes.
A lot of people add the browser identifier class in the <html> tag. Using the body tag is also fine but I would use whichever tag has the least amount of characters in its attributes.
A wordpress 'body' tag may looks like this
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">
So you would put the class in the <html> tag so save repeating that long string.
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"<![endif]-->
<!--[if IE 7 ]> <html class="ie7"<![endif]-->
<!--[if IE 8 ]> <html class="ie8"<![endif]-->
<!--[if IE 9 ]> <html class="ie9"<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
</head>
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">
A html tag may look like this.
<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
In this case you might put the class in the <body> tag.
<!DOCTYPE html>
<html lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
<head>
</head>
<!--[if lt IE 7 ]> <body class="ie6"><![endif]-->
<!--[if IE 7 ]> <body class="ie7"><![endif]-->
<!--[if IE 8 ]> <body class="ie8"><![endif]-->
<!--[if IE 9 ]> <body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
If I had something which left me not optio but to repeat a huge string multiple times, like this.
<!DOCTYPE html>
<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
<head>
</head>
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">
Then I would probably use javascript
<!DOCTYPE html>
<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
<head>
<script>
(function(){
var d=document,
h=d.documentElement,
v = 3,
p = d.createElement('p'),
i = p.getElementsByTagName('i'),
u;
while (
p.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
i[0]
);
h.className += (v > 4 ? ' ie'+v : '');
})()
</script>
</head>
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">
This script is a modifed version of James Padolsey's script, which adds the class to the html tag.