So I am testing out some emails that will be sent to customers/users and I am seeing that outlook doesn't render the background image well, its repeating it.
I have searched and tried certain things like:
https://backgrounds.cm/
I tryed to replace fill="f" & fill type="frame" to "t" & "tile" but still getting the same result.
I have changed the width & height to be the same as or or the picture itself.
Tried to change the CSS background-repeat:no-repeat; moved it around all the ways I know of
Tryed to replace the "v:background" to "v:rect"
Now I'm here :)
I'm seeing that this is a known issue but I can't seem to find a way that works for me.
I really appreciate any help or info in the right direction!
Here is the actual HTML I am using:
<body style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
<table align="center" cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
<tr>
<td background="http://i.imgur.com/uu9hFXR.png"
bgcolor="#E3E6C6"
valign="top"
style="background: url(http://i.imgur.com/uu9hFXR.png);
background-repeat:no-repeat;
background-color: #E3E6C6;
background-position: center;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="f">
<v:fill type="frame" src="http://i.imgur.com/uu9hFXR.png" color="#E3E6C6"/>
</v:background>
<![endif]-->
</td>
</tr>
</table>
</body>
Kind regards!
According to this list Outlook.com and Outlook 2007/2013 does not support background-repeat
It looks like you are calling the image in the background and then calling it again in style="background:...".
Have you tried removing one of those two ref'd images in the table?
Related
I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this:
<table style="width:98%; max-width:800px;">
But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.
Instead, I'm doing this:
<table width="98%">
Is there any way to also set a max-width without relying on CSS?
Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.
Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.
If you want your content aligned left instead of centered, just leave out the first empty cell.
Example:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:
http://jsfiddle.net/YcwM7/
There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
The short answer: no.
The long answer:
Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.
It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.
Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:
Similar to Shay's example except this also includes max-width to work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.
In the head:
<style type="text/css">
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
In the body:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Here is another example of this in use: Responsive order confirmation emails for mobile devices?
This is the solution that worked for me
https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to #philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
I tried to make a background image cover in many different ways but Mailchimp seems to delete that piece of code.
Any approach on how to make this work.
Cheers,
Michael
Ah Mailchimp. Well, in custom templates the best thing to do is literally DO IT ALL. Meaning, add it to the table or TD with CSS AND the default table styling.
Also you have to take into account the Outlook users that your email will go to.
SO you have to add a few things.
Let's start with the html tag above the head. First off, the best doctype to use is XHTML 1.0 transitional. Now I know that you CAN do one with an empty html tag and NO DOCTYPE, but you aren't doing yourself any favors.
Change <html> to <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
This is going to say "You are using Microsoft. Okay, where are those rules?"
Next off, in the CSS you need to add this:
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
.ExternalClass{
width:100%;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
Pay attention to the ones like v* and #outlook a.
SO you have those, and now you can add in the stuff for the background. In EACH table or td that you want a background, you have to add it inline. BUT it is a good practice to ALSO use an xlmns wrapper. This doesn't have to be code, it can be commented out and will still be read as a backup.
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="YOURIMAGEPATH.jpg" color="#000000"/>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#000000" background="YOURIMAGEPATH.jpg" style="background-image:url(YOURIMAGEPATH.jpg)">
<tr>
<td align="center">
<!--YOUR CONTENT-->
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
Notice how the entire table is wrapped in that commented section? That says that basically if your recipient is using Outlook, it is going to go ahead and render the background.
Campaign Monitor made a really nifty too to do just this to table and td. Remember too that you can NOT use cover or skew the background at all. Just make it the 100% size your email will be.
<!--Hopefully not more than 600px-->
Backgrounds.cm by Campaign Monitor
I want to set the image size to 100% inside of td.
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td background="http://source/bg.png">
<img src="http://source/logo.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
So I have a big td with bg-image and a logo on top of it with some text.I am doing css all in-line to be able to send html email.
The problem is that the image has it's natural size, and doesn't resize to 100% to fit the td size.
Firstly, emails are a pain when it comes to CSS / HTML Standards... Google will help you here.. In general.. Your best testing this with outlook/hotmail/gmail.. Outlook is one of the worse for supporting HTML Emails.
As for the code, have a look at this example instead: http://jsfiddle.net/82bd2fyh/
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td style="background-size:100% 100%; background-image:url('http://placehold.it/550x550');">
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
Please note though, background-size is only supported in CSS3, IE9+..
Otherwise another option is to use a normal image tag and stretch that to 100% then position with a z-index your content / a div over top of it.
Email Support Guide Line: https://www.campaignmonitor.com/css/
The above is also under the assumption you are talking about the background image and not the logo / img tag.
If you mean your img tag, then simply apply a style to it.. But do believe you mean your TD background image
Building on Mayem's answer, which is 100% right in almost all email clients, I wanted to add a bit more to it. This will not work in Outlook at all and has potential for issues with Gmail app.
1.) Outlook almost always forces actual size of the image, regardless of CSS or HTML resizing (size is also based on the PPI setting on your computer) so it is always best to size your images to fit what you want them to display at in Outlook and then control size for all other clients.
2.) Outlook does not support background image, so you will need to use VML to mimic this for outook - best place for that is http://backgrounds.cm/. It will do most of the work for you.
3.) Gmail does not read stylesheets, so the code will likely lead to a deformed version when displayed on gmail app - this is something you will need to work on from a design/layout perspective
4.) Margin-left and most of the code on the overlay content needs work for email HTML as it is not supported on many email clients.
See below code that is built from Mayhem's answer with some tweaks and the Outlook conditional VML added in.
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:960px; margin:0 auto;">
<tr>
<td background="http://placehold.it/960x550" width="960" height="550" style="background-size:auto 100%; background-image:url('http://placehold.it/960x550');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:960px;height:550px;">
<v:fill type="tile" src="http://placehold.it/960x550" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td> </tr>
</table>
simply change
<img src="http://source/logo.png" style="margin-left:35%;" />
to
<img src="http://source/logo.png" style="width:100%;margin-left:35%;" />
A more correct solution is to change
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
to
<img src="http://placehold.it/100/09f/fff.png" style="width:65%;margin-left:35%;" />
I'm creating a newsletter and set the background-color using a hexcode #25292C; When I send the newsletter out the message appears fine. When I forward the newsletter to someone else the newsletter background overlays the entire email. I want to prevent the email from getting the newsletter background color. I'm using lotus notes as my email client.
Is there any workaround ?
Here is what you are after:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding // main bg color >> --><table bgcolor="#323232" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding:30px;"><tr><td>
<!-- CENTER FLOAT -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="padding:30px;"><tr><td>
main panel
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>
When you forward the email to a second recipient, the background is white (or whatever you set it)
This worked for me
<body style="background-color:#333333; min-height:1000px;" bgcolor="#333333">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="bg.jpg" color="#333333"/>
</v:background>
<![endif]-->
......
</body>
Are you using Tables? I have done this and had no issues on FWD emails(well my focus was outlook/gmail/yahoo/aol)
<body bgcolor="#25292C">
<div style="background-color:#25292C;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#25292C">
<tr>
<td>
your stuff
</td>
</tr>
</table>
</div>
</body>
...but then again...a lot of email providers (not sure what you focus...Outlook iEX) are not capable of composing (or Forwarding) complex HTML messages in its message body. You can get around this by choosing "Forward as Attachment" or "Redirect" from the Message menu/bar, these will send the message intact (and display inline on some of your recipients' email programs).
Outlook user preferences can strip the body style right out of your email. It is usually a best practice to wrap your content in a tag and apply colors to EACH for maximum compatibility with email clients.
It's a pain but it works. Also remember don't use shortened colors like: #F00. Outlook makes these black.
simple email format:
<table>
<tr>
<td (width) (bgcolor) (style including font, font-size, color and if applicable, line height)> content </td>
</tr>
</table>
I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?
Have a look at this pic:
The pink is the background color of the body tag and the grey is the bg of the table. They both have 0 everything (margin, paddting ect). But there is still some space. The pink should not be visible.
Does anyone know how to get rid of this space on the body?
Also here’s some CSS for the start of the email:
<html>
<head>
<style type="text/css">
html, body{ width:100%; }
body{ background-color:#ff00ff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
<table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >
Cheers!
Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.
Here's a trick to fake full backgrounds: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048
Outlook uses the broken Microsoft Word HTML engine and is not based on any reasonable resemblance to a browser.
If you have Word, you can at least open your email as html and see how it renders it without having to go through the whole mail cycle.
Outlook really in the bane of any email marketer. It is an absolute pile of crap and fails to support even the most basic CSS expectations.
I'd have to have many frank and disappointing discussions with graphic designers over the limitations of email as a platform due to Outlook. Microsoft has seriously made a step backwards in using the Word engine for Outlook.
Stange that the <body style="padding:0px; margin:0px;"> doesn't work.
I find that with outlook 2007/2010 that if you have padding-top applied to a column but not the other columns in the same row Outlook will apply that padding to all the columns for some reason. Are you able to paste more of the email code so we can have a look that its not something else causing the issue.
Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):
<html>
<head>
<title>Title Tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">
</td></tr></table>
</td></tr></table>
</body>
</html>
You will need to set the width of 600 to whatever the width of your email is.
There are cross-email client bugs with body tags, and padding/margin values in CSS.
NB - this is only necessary, and only works, on the body tag.
With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:
html, body
{
margin: 0px !important;
padding: 0px !important;
}
table
{
margin: 0px !important;
}
Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...
As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone.
<table cellpadding="0" cellspacing="0" border="0" style="width:100% !important; margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- SECTION:TOP -->
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
I know this is a bit late, but I came across this post and thought you might be able to test this method as well.
http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/
"Fixing the forced body padding in Outlook 2007, 2010 and 2013
Testing a html email recently with a high percentage of recipients
likely to be users of Microsoft Outlook I came across a bug where it’s
not possible to overwrite the forced body padding in versions of
outlook (which use MS Words rendering engine 2007, 2010, 2013).
This was breaking the design and causing unwanted whitespace on the
left margin of the email. The offending versions of outlook support
margin (including negative margin) but only support inline styles. So
the fix/hack is to wrap the entire email in a wrapper table and apply
negative margin to just the problematic email clients – using html ‘if
statements’ as below."
<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
<tr>
<td>
<![endif]-->
<!-- YOUR CONTENT HERE -->
</td>
</tr>
</table>