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.
This question is related to
html
background
outlook
newsletter
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 the src attribute.
You can get all the info/methodology from the imagecreatefrompng() page on the PHP Docs site.
you cannot add a background image to an html newsletter 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:
azimuth
background-attachment
background-image
background-position
background-repeat
border-spacing
bottom
caption-side
clear
clip
content
counter-increment
counter-reset
cue-before, cue-after, cue
cursor
display
elevation
empty-cells
float
font-size-adjust
font-stretch
left
line-break
list-style-image
list-style-position
marker-offset
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
overflow-x
overflow-y
pause-before, pause-after, pause
pitch
pitch-range
play-during
position
quotes
richness
right
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-shadow
text-transform
top
unicode-bidi
visibility
voice-family
volume
widows
word-spacing
z-index
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/
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.
<td bgcolor="#your_color" background="your_image.jpg">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
<![endif]-->
<p>Text over background image.</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
You can use the code below :
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style="width: 700px; height: 460px;">
<v:fill type="tile" src="images/feature-background-01.png" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
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.
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
Background image is not supported in Outlook. You have to use an image and position it behind the text using position relative or absolute.
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.
UPDATE: Alternatively you can use the VML method which allows you to add background images to individual page elements in Outlook.
This works in most clients including Outlook:
<body style="background-image: url('img.jpg');">
<table width="100%" background="img.jpg">
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.
<!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-image: url('http://lorempixel.com/output/food-q-c-100-100-7.jpg'); background-color: #0D679C; background-position: top center;" bgcolor="#0D679C">
<!-- BODY FAKE PANEL -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/output/food-q-c-100-100-7.jpg">
<tr>
<td>
<!-- CENTER FLOAT -->
<table width="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="1000" align="center" valign="middle">
Center panel
</td>
</tr>
</table>
<!-- /CENTER FLOAT -->
</td>
</tr>
</table>
<!-- /BODY FAKE PANEL -->
</body>
</html>
You can use it only in body tag or in tables. Something like this:
<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">
This worked for me.
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 background CSS property is supported for div elements. You might have to use an img and 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.
Powerful tool for "Bulletproof Email Background Images" (VML for Outlook 2007/2010/2013, and HTML/CSS for Outlook 2000/2003, Gmail, Hotmail...)
as an exemple :
<div style="background-color:#f6f6f6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">
</td>
</tr>
</table>
</div>
in order to have the specified background image to Full email body.
This link help to use the Vector Markup Language (VML)
There is something explained here :
Source: Stackoverflow.com