HTML e-mail template
Question
I know this is pushing reality a bit, but I need to ask this question...
Is it possible to have a fixed background image with no-repeat on, and with a table in front of the image?
My problem at the moment is, that if the table in front of the current image gets to long, (longer than the image height) then the image repeats it self downwards and it looks really ugly and unprofessional.
Div is out of the question, it doesn't work with e-mails that well.
The image is basically from top to bottom a black to light blue shade image.
below is the html template i'm using to merge with my outlook email.
<body style="background: transparent url(<MY IMAGE>;);">
<table align="center" border="0" cellpadding="0" cellspacing="0" width=700">
<tbody style="text-wrap:normal;word-wrap:break-word">
<tr>
<td>
<font face="Verdana"><img height="20" src="<MY IMAGE>" style="width: 700px; height: 20px;" width="1" /></font></td>
</tr>
<tr>
<td>
<font face="Verdana"><img height="80" src="<MY IMAGE>" style="width: 750px; height: 80px;" width="750" /></font></td>
</tr>
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding: 10px;">
<p>
<span style="font-size: 14pt;"><strong><span style="color: rgb(0, 0, 128);"><font face="Verdana">Place Heading here.</font></span></strong></span><br />
<br />
<span style="font-size: 10pt;"><span style="font-family: arial,helvetica,sans-serif;">Place text here.
Place text here.Place text here.
<br />
<br />
</span></span></p>
</td>
</tr>
<tr>
<td>
<font face="Verdana"><img height="90" src="<MY IMAGE>" style="width: 750px; height: 90px;" width="750" /></font></td>
</tr>
<tr>
<td align="left" bgcolor="#83B5D4" style="font-size: 9px; color: rgb(255, 255, 255);">
<font face="Verdana"><img height="10" src="<MY IMAGE>" style="width: 10px; height: 10px;" width="10" /></font></td>
</tr>
<tr>
<td align="center" bgcolor="#162C76" style="padding: 10px;" valign="middle">
<font color="#FFFFFF" face="Verdana" style="font-size: 10px; line-height: 1.5em;">Tel: +27 11 454 1074 | Fax: +27 11 454 1073 | <a href="mailto:support@psiber.co.za" style="color: rgb(255, 255, 255); text-decoration: none;">support@psiber.co.za</a> | <a href="http://cts.vresp.com/c/?PSIberSolutions/45620e101d/TEST/b2198ee889" style="color: rgb(255, 255, 255); text-decoration: none;" target="_blank">www.psiberworks.com</a><br />
15 Seventh Avenue, Edenvale, 1610</font></td>
</tr>
</tbody>
</table>
</body>
1 answers
solution1
0 2011-12-09 10:44:46
The way I got around this was to add a load of colored padding to the image at the bottom. The cell will hide all this until it is pushed down and you don't have to worry about CSS styles not working in various email browsers.
Background images are a pain in a lot of email browsers. You can however 'hack' them into Outlook 2007 if you really need to - http://emailmarketingvoodoo.com/blog/post/outlook-2007-can-now-render-background-images/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.