{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一夜七次 的问题《How make background image on newsletter in outlook》','https://www.manongdao.com/q-29920.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to make newsletter where I have some image as background and text on it. This is easy but I need this to work on Ms Outlook.
What I have tried:
1.
<td width="100" height="100" style="background: url('someurl');">text</td>
2.
<td width="100" height="100" background="someurl">text</td>
3.
<td width="100" height="100">
<div style="width: 0px; height:0px; position: relative;">
<div style="width: 100px; height: 100px; position: absolute; background: url('someurl')">
text
</div>
</div>
</td>
But nothing works well on outlook. I have no idea how fix it. I'm using outlook 2007.
Any help would be appreciated.
Background DOES work in Outlook, but only in the
<body>tag of the email. It won't work in individual<td>'s, only the whole email.This works in most clients including Outlook:
Here is the full code that works in all major email clients including Outlook. It has background-image set with fallback to background in a 100% width table.
The only way I was able to do this is via this code (TD tables). I tested in outlook client 2010. I also tested via webmail client and it worked for both.
The only things you have to do is change your_image.jpg (there are two instances of this for the same image make sure you update both for your code) and #your_color.
source
You can use the code below :
Note: Include this code above the table for which the background image is needed. Also, add the closing tag mentioned below, after the closing tag of the table.
I had exactly this problem a couple of months ago while working on a WYSIWYG email editor for my company. Outlook only supports background images if they're applied to the
<body>tag - any other element and it'll fail.In the end, the only workaround I found was to use
<div>element for text input, then during the content submission process I fired an AJAX request with the<div>'s content to a PHP script which wrote the text onto a blank version of our header image, saved the file and returned its (uniquely generated) name. I then used Javascript to remove the<div>and add an<img>tag using the returned filename in thesrcattribute.You can get all the info/methodology from the
imagecreatefrompng()page on the PHP Docs site.Not all HTML and CSS is supported by Microsoft Office products, Outlook in particular; take a look here for reference on supported elements for what you can and can't use in Outlook when rendering HTML.
Specifically, from that link it doesn't state the
backgroundCSS property is supported fordivelements. You might have to use animgand do some hacky layering.Note that in your second example you have a quote mismatch, which won't help any.
Lastly and something I just came across at the link provided is the Outlook HTML and CSS Validator tool - you could try running that against your newsletter markup and see if it gives you any suggestions/alternatives.
you cannot add a background image to an
htmlnewsletter which is to be viewed in outlook. It just wont work, as they ignore the property.You can only have block colours (
background-color) behind text.Outlook doesn't support the following CSS:
Source: http://msdn.microsoft.com/en-us/library/aa338201.aspx
UPDATE - July 2015
I thought it best to update this list as it gets the odd upvote every now and then - a great link to current email client support is available here: https://www.campaignmonitor.com/css/