I coded an html email, and just tested in Gmail. Everything shows up fine besides for a background image. I put the background image on my wrapper table, like this:
<table cellpadding="0" cellspacing="0" border="4px solid grey" align="left" background="http://www.totalrecallsolutions.com/corporate/email templates/images/appt_reminder_one_bg.jpg">
And still, there is no image showing up in Gmail. I understood from my google searches that this is the correct way to make a background image show up in Gmail. So why is it not showing up?
Thanks!!
Besides the url with spaces, there's another thing, Gmail doesn't allow url() attribute in inline css
Don't use background images. Gmail, among others, will ignore any
url() attribute in an inline style, and the simple background= tag
attribute. You can use background colors if you wish (bgcolor tag
attribute or background-color: css statement).
Here is the link where I read that: http://groundwire.org/support/articles/css-and-email-newsletters
Regards
Gmail has added support for background and background-image properties last February (according to Campaign Monitor).
But in order for it to show, your code must contain at least one < img > tag. You can use spacer.gif to trick it (or any transparent image for that matter).
In my case I had CSS styles defined for background-repeat and background-size in a style tag that was being transformed to a single inline background: no-repeat/cover that was overriding the background attribute for my table. Using just [table background="image-url"] worked for me
Related
I've tried everything I can think of, but no matter what I do, MailChimp demands any <a> with an href has color: inherit !important; text-decoration: inherit !important and, because Outlook is absolute garbage, means all my links are coming up blue and underlined.
In this example, I can put in a link, and it'll just turn blue:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;" mc:edit="button">
READ MORE
</td>
In this example, if I put in a link, it'll just ignore my <a> and add another one adjacent:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;">
<a mc:edit="button" style="color: #27646a; text-decoration: none;">
READ MORE
</a>
</td>
I can put this in my CSS, but obviously MailChimp decides to ignore it:
td a {
color: #27646a !important;
text-decoration: none !important;
}
I don't really know what my other options are, and I swear I don't remember MailChimp arbitrarily deciding everything must look like crap in Outlook - is there something I'm missing?
In case others are finding this, it is possible to set hyperlink colours in Mailchimp templates that will be respected by Outlook without styling each link inline.
I'm using a custom HTML template in Mailchimp, using the classic builder.
It does seem like it's necessary to specify the link styling for each type of content block that you have in your template. In my case, my editable content blocks are always div tags. In my template code, within the body tag:
<style type="text/css">
div a{
color:#000000 !important;
text-decoration:underline !important;
}
</style>
The style would need to also be defined for all tables, p, or whatever else you are using to contain text. I've tested the result in Outlook 365 and it works.
I remember reading somewhere that mailchimp won't allow hyperlinks to be too similar to the background colour (because the unsubscribe link must remain visible) so that's a possible issue as well.
I have used two methods for generating emails in MailChimp: 1) Foundation For Emails and 2) a MailChimp drag and drop email template.
In Foundation, it takes my source CSS code:
.item-link {
color:#0C3C80;
font-family:Helvetica;
font-size:16px;
text-decoration:underline;
}
and generates the inline style like this for links with class "item-link":
<span style="font-size:12px">View this email in your browser</span>
This produces the correct color in Outlook.
In the drag and drop template, I use the "Design" tab -> "Body" -> "Body Link" of the editor to assign the link color. It also appears correctly in Outlook.
The difference may be that in two of your examples you assign the color in the td tag style, and in the third, you designate it as a button to the MailChimp editor, so the style for the button is probably overriding the style you want.
I hope this helps.
You should be explicitly declaring colours and text-decoration:none/underline on every single <a> tag. Mailchimp will then avoid adding these fallback styles.
I've always declared mc:edit on the table cell wrapping the <a> tag as that is the foolproof way of editing the url and keeping the styles.
Here is the code I use. There are a tonne of other styles added and that is simply because I use the border technique of building buttons, but the issue is the same. I have mc-edit on this tag and have made sure to declare text-decoration and colour and my client uses this every week without issue.
<td align="center" valign="middle" style="padding:14px 20px;" mc:edit="button">
Button
</td>
Try that. Hoping that will work out for you
see this link
http://www.w3schools.com/html/html_attributes.asp
observe the HTML code.inside the tryit editor.
what should we use for it?
we any plugins or javascript for it?
use style attribute to give any type of style to any of the html element. Eg
Some link here
The best way of styling is using css. Here is a the turorial for that.
If you want to change the color of the background you can add
style="background-color:COLORHERE"
eg:
<body style="background-color:red">
or if you wanted to change the color of your font you can just add
style="color:COLORHERE"
eg:
<p title="About W3Schools" style="color:orange">
This all are attributes on that page that are added to a tag as in a and p they have used.
They are used for styling. When you are using style in your <p style="color:red"></p> , so over-here you are changing the color of font i.e. content that is present in-between p tag, font-color gets change from black to red. Same way we always add alt attribute to <img> and title has they have used in <p>. This two are not visible but plays main role with search engine.
Currently using http://backgrounds.cm method for background email generation. When not using the code, the email looks correct in most test. When the background image is added, Outlook 2013 will display it, but all the table formating expands to 100%. Not sure if I'm implementing it incorrectly.
Currently applying the background to the topmost table which contains several cells, not the entire body.
I've pasted the code here: http://pastebin.com/dX8zEZDV
I did a couple things to fix it:
Changed your doctype from strict to transitional.
Removed duplicate meta tags.
Closed all unclosed-tags (img and br tags).
Removed your outer two containing tables (#container_table and #container_wrapper).
In #container_table, removed min-width, added margin:0 auto and align="center" so table is centered.
In VML code section, replaced mso-width-percent:1000 to width:850px.
Updated closing VML tags to correct nesting order (closed prematurely).
Optional:
In VML code section, changed the color to better match your background (#292929).
The only instance I've found where VML background images and the inline fallbacks don't work is when I view my Outlook email using the Gmail app on Android. However, when I view my name#gmail.com email in the same app, it's fine. So in the event the background image doesn't load, the bgcolor will display so your users can still see your white text.
Note:
Always remember to validate your code. Even if there are some errors you can't fix (for instance the background attribute in the td won't validate), you can verify all your tags (minus any VML code) are nested/closed properly, as well as finding any accidental special characters you may have copied into your code from Photoshop or Word.
Updated source at jsfiddle: link
If table formatting expands to 100%, it's because you set "Table cell width" setting to "Full email width". It's best to use VML background images on fixed width and height table cells.
Ideal settings for backgrounds.cm are "A single table cell" and set width and height. Otherwise, the result might look different from non-Outlook clients (sometimes it's still OK if it's agreed upfront with stakeholders).
I want to send html body email like below with background-image css to my users :
<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
My Content
</div>
but as the link below says google does not support background-image css!
http://www.campaignmonitor.com/css/
what can I do about that?
Have you tried setting the background attribute of a table?
This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.
Example (Tested in Gmail)
<table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
<tr>
<td>
Email Content...
</td>
</tr>
</table>
You can't do anything about it. Using CSS to set background image is not supported in many web-mail application because of security reasons.
The only way to actually show background behind text is to create an image with text on it and display it using <img src="##" /> tag. Though, always remember to add link to text version of your email and/or link to web-page based copy of your newsletter.
Additoinally, you need to remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc.
Check out this page for few good suggestions: http://www.sitepoint.com/code-html-email-newsletters/
Also MailChip (probably most popular Newsletter management system) has few very good suggestions on how to code HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails
Update as of 2019. While there are issues with adding background image from inline image on the email (at least I did not find a way to make it work). Actually css-background image works fine on at least some elements as long as they are absolute urls to resource, my snippet that works on gmail as of June 2019:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">
This makes me wonder why it didn't work for the author. I have few theories:
a) back then it didn't work
b) it does not work on div elements
c) link was broken
d) missing single quotation mark
e) single and not double quotation mark around attribute style
f) despite the width and height on style, div was of 0x0 size
(Some of those above sound stupid)
What eventually worked for me is changing an image extension from .svg to .png
It seems Gmail doesn't support .svg images.
Is it possible to stop repeating background image in a table data (TD) without CSS ?
For example
<table>
<tr>
<td background="http://foobar.com/image.jpg">Some text</td>
</tr>
</table>
I'm looking for a HTML solution, because I'm developing HTML template which will be used for a mail newsletter.
You can append the css to your tag straight in your html code:
<td style="background-image:url(smile.gif); background-repeat:repeat;">
I think there is no way to do that just using html!
Simple answer: No.
Fortunately, most emails you can use inline css styling. As such, I'd try the following and see if it accomplishes what you're looking for.
<td style="background:url(http://foobar.com/image.jpg) no-repeat;">Some text</td>
In the event that fails (as I've seen it do so before), you're only other option is place the image in an <img> tag and manipulate it so it falls underneath the text.
See here for supported CSS attributes: http://www.campaignmonitor.com/css/
Hope this helps.
background images are supported. Please check out this generator:
http://backgrounds.cm
If you want the image not to repeat just add an inline style:
style="background-repeat: no-repeat;"
to the tags containing the background image.
For maximum compatibility, you should use both inline CSS and the HTML background attribute, as some clients ignore one but not the other.
<td style="background-image:url('http://www.example.com/smile.gif'); background-repeat:no-repeat;" background="http://www.example.com/smile.gif">Some text</td>
Some points to note:
You must use a absolute URL for the image src
The quotes around the the URL in the background-image inline style should be there (the opposite of the normal CSS recommendation, but some clients have issues if the single quotes aren't included.)
Don't use CSS shorthand, again some clients ignore it although they will parse the longhand. Also, some will set a background color of #000000 if you don't set a background-color in the shorthand version.
Background images don't work at all in Outlook 2007, unless you use some rather nifty Microsoft proprietary code. Unfortunately, that code doesn't allow you to stop it repeating.
The best way to stop it repeating is simply to make the image much bigger than it needs to be, so that it never needs to repeat.