I have found another thread (Outlook 2013 background image broken) however I can't comment as I am a new user of Stack Overflow. Here's my code:
<table width="695" height="194" border="0" cellpadding="0" style="background-image:url('http://champ.website-admin.net/files/2014/12/email.jpg'); padding:24px;">
<tbody>
<tr>
<td><h3>Emma Woolward</h3></td>
</tr>
<tr>
<td><p>operations#champresources.com.au</p></td>
</tr>
<tr>
<td><p>1300 GO CHAMP</p></td>
</tr>
<tr>
<td><p>P: 1300 462 426</p></td>
</tr>
<tr>
<td><p>www.champresources.com.au</p></td>
</tr>
<tr>
<td><img src="http://champ.website-admin.net/files/2014/12/facebook.png" style="width:100px;height:33px; float: left;"><img src="http://champ.website-admin.net/files/2014/12/zeroharm.png" style="float:left; margin-left:5px;"></td>
</tr>
Background image is not appearing. The response to the similar thread suggests to use a multipart e-mail and they offered a code example:
--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://test.endlesspeak.cz
<td background="cid:bg-deepak.jpg">
--==boundary-1
Content-type: image/jpg; name="bg-deepak.jpg"
Content-ID: <bg-deepak.jpg>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="bg-deepak.gif"
I am wondering where this example code is best to go within the head?
Or does anybody else have any other thoughts on why the background image disappears when it goes into outlook?
Keep in mind that Outlook uses Word to render HTML, not IE. Don't know if Word supports background images for tables, AFAIK it does not support background images for the tag.
Related
I am creating an html email template that will hopefully show on mostly used desktop and web email clients (such as Outlook, Gmail or Yahoo).
I'm having a hard time on doing an html email template where my images are being considered as attachments. I'm assuming it's possible to not show them as attachments since most websites that I am subscribed of such as Pinterest, they have images on their html email templates, but it doesn't show them as attachments too.
Here's a code I am testing
<table align="center">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<img src="#web/mail/img/email-for-first-users-header.jpg" style="width:auto; height: auto; border-style: none; display: block;"/></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<h2>Hi, non-user's name!</h2>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
What I basically want to achieve is that, the email clients will not add my images on the attachments area.
Embedding an image in an email first requires that you have a version of said image as a base64 encoded string. Once your image is encoded, jump into your template, or whatever HTML you’re sending out, and embed it using a standard HTML image tag:
<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgACAESAAMAENkDZ5u8/61a+X...more encoding" />
Then you’re done! Send away.
Background: I am trying to my emails html based, as it is more versatile (I am new to html). I have been playing around with html for a few hours. I can so far embed tables, and different headings and links etc. into the emails that I send out, but have massive difficulty with embedding pictures.
I thought it might a client specific problem - but Hotmail, Outlook and G-mail all don't show the attached image. All I see is the the box with the alt (alternative) text.
#!/bin/bash
h_test=mytest.html
echo "This is a test email"> TESTEMAILTESTEMAILTESTEMAIL.txt
echo "<html>
<head>
<title>HTML E-mail</title>
</head>
<body>
<p><b>Note:</b> This is just a test email.</p>
<p>Trying to do different things all in one email.</p>
<h2>Table 1</h2>
<table style="width:25%">
<tr>
<td>New York</td>
<td>UNITED STATE OF AMERICA</td>
</tr>
<tr>
<td>Sydney</td>
<td>AUSTRALIA</td>
</tr>
<tr>
<td>Istanbul</td>
<td>TURKEY</td>
</tr>
</table>
<h2>Table 2</h2>
<table border="1"; style="width:50%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<h2>Image 1</h2>
<img src='https://www.google.com.au/search?q=image+test&espv=2&biw=1366&bih=663&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI1_fn1MrNyAIVITamCh32cQej#imgrc=driDe9TNSAxoAM%3A' alt='You should be seeing a picture'>
<h2>Link</h2>
<a href='http://www.google.com'>Click Here</a>
</body>
</html>" > $h_test
echo ">> Sending email..."
`mail -s "$(echo -e "This is Subject\nContent-Type: text/html")" my_email#me.com < mytest.html`
echo "...e-mail sent"
Research: I have looked at websites such as this site, but didn't work. I have also looked up similiar questions on stackexchange but couldn't make it work.
Q: How can I embed pictures into my emails?
You can embed images in the html it self,base64-encoded, like this:
<img src="data:image/png;base64,iVBORw0KGg....." />
Look for example at this site to generate the base64 endoding: http://dataurl.net/#dataurlmaker
Update:
I have now learned that this does not work in all email-clients:
Some examples:
iOS Mail Yes
Outlook 2003 Yes
Outlook 2007+ No
Apple Mail Yes
Yahoo! Mail No
Gmail No
Android default Yes
from this link https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/
You are using the URL https://www.google.com.au/search?q=image+test&espv=2&biw=1366&bih=663&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI1_fn1MrNyAIVITamCh32cQej#imgrc=driDe9TNSAxoAM%3A which is the URL to an HTML document.
You need to use the URL to an image!
Note that most email clients will prompt users before displaying images on external URLs.
You can avoid this by attaching the image (i.e. sending a multipart MIME email) and then using the cid: URL scheme to point to the attachment.
Alternatively, you can convert the image to a data: URL scheme and embed it directly in the URL.
EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Let's assume that I'm already sending email messages and all that is working OK. I'm trying to embed a Base64 img in the HTML for a system.net.mail message inline and it's not working. It shows everything and the source on the email has the image embedded but it's not showing.
<html>
<table>
<tr>
<td>Name:</td>
<td>Ralph Wiggums</td>
</tr>
<tr>
<td><img src="data:image/png;base64,iVBORw0KGg...deleted for size sake...ErkJggg=="></td>
</tr>
</table>
</html>
I've just started using a new HTML email software (was using Campaign Monitor but now having to use a plugin within our CMS).
Our template uses some empty cells at the top with different background colors for aesthetic purposes.
When using Campaign Monitor these showed fine in Gmail but in the new software (eCampaign) Gmail is totally ignoring the height of the cells, making them all 1 pixel high.
I tried adding height="x" and style="height: x;" but neither seem to work.
I want to avoid using spacer gifs if I can.
Further down the email I've put in a tag but this makes the height too large then.
I've seen some suggestions of wrapping the in a tag but not sure if that will work.
Any suggestions?? Need an answer asap!
My code is as follows:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#edede9" style="font-size:1px; line-height:6; height:6;"></td>
</tr>
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#c4c3b6"><!-- --></td>
</tr>
<tr>
<td valign="top" height="1" colspan="2" bgcolor="#ffffff"><!-- --></td>
</tr>
</table>
The only way is to use a trans_dot.gif or other spacer image within the empty cells. It cant be done in any otherway.
So find or make a 1px * 1px transparent image and insert.
If a cell is without text or images it will collapse in 9 out of 10 email clients