I know that using a background image in html emails can be tricky, but it should be possible. Basically I would need to get it working in outlook 2003, 2007 and in gmail webmail. Here is the image of a test scenario I would like to achieve:
And here is the html code where I tried 3 different ways to include the background:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> </head> <body style="margin:0px; padding: 0px;"> <div id="reference_image"> <img src="http://img59.imageshack.us/img59/7208/refp.jpg" alt="reference image"> </div> <br><br> <div id="normal" style="background: #518E55 url(http://img706.imageshack.us/img706/60/backwt.jpg) no-repeat; height: 185px; width:320px;"> <h2 style="padding-top: 135px; padding-left: 20px; color:#FFFFFF;">Just some random text</h2> </div> <br><br> <div id="margin" style="background-color: #518E55; width:320px;"> <img src="http://img706.imageshack.us/img706/60/backwt.jpg" alt="background" height="185" width="320"> <h2 style="margin-top: -50px; padding-left: 20px; color:#FFFFFF;">Just some random text</h2> </div> <br><br> <div id="table"> <table background="http://img706.imageshack.us/img706/60/backwt.jpg" style="background-repeat: no-repeat; height: 185px;" bgcolor="#518E55" width="320" border="0" cellspacing="0" cellpadding="0"> <tr><td> <h2 style="padding-top: 115px; padding-left: 20px; color:#FFFFFF">Just some random text</h2> </td></tr> </table> </div> </body> </html>
Can anybody help me to get this example to work in these 3 clients? And as you imagine the white text should also fall back nicely so that it will be visible if images are off.
This seems to be the topic of interest lately. Background images have limited browser support and whilst you may have a workaround to achieve your background image, you can never guarantee they'll work across all popular email clients.
Your best bet it to work with convert your background into a standard image and use tables broken into cells to assign image and text areas.
Based on your image example, I'd set everything as an image, but save a cell and set a plain black background colour. It may not look to crash hot in all scenarios, but the text and images will be visible (assuming images are loaded) straight away.
Until things change with browser support it's best not go against the flow, but work within your boundaries.