2

I'm having trouble with my background image not showing up in an emailer. Can anyone tell me why this would be happening.

   <table border="0" cellpadding="0" cellspacing="0" height="489" width="638" align="left" background="http://www.bla.com/images/email-bg.jpg">

Here is the full setup with nested table for the text to overlay on top of the tables background image.

  <table border="0" cellpadding="0" cellspacing="0" height="489" width="638" align="left" background="images/email-bg.jpg">
     <tr>
            <td valign="top" align="left">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="left" valign="top" width="100%" style="font-family: Arial, sans-serif; font-size:12px; color:#585858; padding:35px 230px 0 40px">
                            <p style="font-size:28px; color:#474747">Welcome to <b>bla bla</p>
                            <p style="font-weight:bold; margin-bottom: 4px;">Just click the link below to finish your registration:</p>
                            <a href="#">Continue</a>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" valign="top" width="100%" style="font-family: Arial, sans-serif; font-size:10px; color:#FFF; padding:80px 120px 0 40px">
                            <p style="margin-bottom:0">** Please do not reply to this automated message. The Email box that sent the message is not monitored.**</p>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>

UPDATED CODE

I changed my code to use this instead which uses style attribute

<table border="0" cellpadding="0" cellspacing="0" height="489" width="638" align="left" style="background-image:url(http://www.bla.com/images/email-bg.jpg)">

This works in apple mail client but not in outlook. Anyone know of any answers to outlook?

Chapsterj
  • 6,483
  • 20
  • 70
  • 124

4 Answers4

4

Most of the e-mail clients dont show background images. Use solid colors. Or some workaround.

João Mosmann
  • 2,884
  • 19
  • 25
  • it's not really a workaround. You need to crop the image layout using Photoshop or Fireworks with the Slice Tool. – João Mosmann Jul 24 '12 at 20:04
  • The image is one image. The problem isn't the image? or at least that what I thought. I thought it was the fact that outlook and some other email applications don't read background image. – Chapsterj Jul 24 '12 at 21:41
2

Background images on tables and table cells can not be rendered in Outlook 2007 and Outlook 2010.

use the vml hack

<td align="center" bgcolor="#ffffff" style="border-bottom:1px solid #000; border-top:1px solid #000;" valign="middle" background="image_name.jpg">
<!-- EMAIL CONTENT STARTS HERE -->
                <!--[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:250px; width:600px; top:0; left:0; border:0; z-index:1;' src="image_name.jpg"/>
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:250px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
             <![endif]-->
    <table>
    <tr><td>CONTENT HERE</td></tr>

    </table>

<!-- EMAIL CONTENT ENDS HERE -->
                <!--[if gte mso 9]>
            </v:shape>
            <![endif]-->

Make sure height and width are correct and that should work

Paola Wolowitz
  • 21
  • 1
0

Try this: fill out the pertinent information in the code and place this where you want the image to be the background.

ABontia
  • 1
-1

Unless your base href is set your image path should contain the ENTIRE path (http://domain/path) since the email client does not know what domain you are referring to.

Dutchie432
  • 28,798
  • 20
  • 92
  • 109