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
Related
I am working on an outlook email template, I am trying to render this piece of code, especially for outlook Windows app
<div style="width:100%;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{QUEST_URL}}" style="height:36px;v-text-anchor:middle;width:100%;" arcsize="5%" strokecolor="#01AAA3" fillcolor="#01AAA3">
<w:anchorlock/>
<center style="color:#ffffff;font-family: Manrope, Tahoma;font-size:14px; font-weight: 800;line-height:30px; ">START QUEST</center>
</v:roundrect>
<![endif]-->
START QUEST
</div>
But the anchor's width is not being rendered 100%. Text is also not showing.
It's rendering like:
I want it to be rendered like:
So, please need help in that regard.
Try with setting the parent div's width to 100vw so that it'll take the whole width, then give the 100% width to the anchor tag.
<div style="width:100vw;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{QUEST_URL}}" style="height:36px;v-text-anchor:middle;width:100%;" arcsize="5%" strokecolor="#01AAA3" fillcolor="#01AAA3">
<w:anchorlock/>
<center style="color:#ffffff;font-family: Manrope, Tahoma;font-size:14px; font-weight: 800;line-height:30px; ">START QUEST</center>
</v:roundrect>
<![endif]-->
START QUEST
</div>
Outlook desktop for Windows is rendered as if for print. Since you already have VML, you can safely make the width and height fixed pixels without affecting other email clients.
So change the VML width and height to what you want, e.g.:
height:36px;v-text-anchor:middle;width:600px;
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?
I have made a button for a newsletter using http://buttons.cm/
Although it is supposed to display properly on Outlook, the text is not vertically centered but instead is aligned slightly to the bottom.
Button's original code:
<td align="center" width="70%">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fillcolor="#0072b9">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Leer más</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
How it's supposed to look (and how is looking on Mail, for example):
How it's looking on Outlook:
I have tried changing the height and line-height values to ems or % instead of pixels, adding the mso-line-height-rule:exactly property, adding the line-height to the td instead of to the a tag... no luck!
This is the closest I can get it through VML in email to make Outlook listen. It is not perfectly vertical center, but is close.
I changed the VML to include the text and link of the button inside the roundrect tag inside the VML instead of using the a tag for both. This allows better compatability with Outlook because it is utilizing VML (a microsoft language) instead of HTML that would require Word to rewrite/translate it. This combined with a couple small tweaks (e.g. set a defined width) produced the closest to vertical align I could get. VML offers many stylings and other options, but not all translate into Email/Outlook, so keep this in mind if you research into VML.
:
<td align="center" width="70%">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fill="t">
<v:fill type="tile" color="#0072b9" />
<w:anchorlock/>
<center style="text-align:center; color:#FFFFFF; font-family: Verdana,sans-serif; font-size:20px; font-weight:normal;">Leer más</center>
</v:roundrect>
<![endif]-->
<a href="http://"
style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none; mso-hide:all;">Leer más</a>
</div>
</td>
According to W3Schools the align attribute defines the horizontal and not vertrical alignment of content in a cell.
W3Schools specifies that the vertical alignment of the content in a cell can be defined using the valign attribute
<td align="center" valign="middle" width="70%">
Alternatively you can use the vertical-align css attribute defined as an inline style to vertically center an element in its parent container.
You may need to use one or the other or both of the above methods depending on the mail client(s) you are targeting. It pays to check which mail clients support which elements, there are plenty of references online, heres one, you may be able to find better.
mso-text-raise style will help you to achieve proper vertical align
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>