Confeccionar email con imagenes de fondo y que se vean en Outlook 2007 y 2010

Logotipo Outlook 2007

Hace poco he empezado a enviar mailings masivos con ofertas y descuentos de mi empresa y me he ido encontrando con varios problemas. Uno de ellos era la imposibilidad de poner imágenes de fondo y que Outlook las interpretase correctamente.

Después de dar rodeos, y de búsquedas infructuosas, en un foro lei a alguien asegurar que era posible poner imágenes de fondo (background-image) en tablas y que Outlook 2007/2010 las pudiese interpretar correctamente.

Como comentan en la misma página en la que explican el hack, el problema es que el intérprete de Outlook es Word, y éste no interpreta HTML como a todos nos gustaría.

Éste es el código necesario para el <td> en el que queremos insertar la imagen de fondo. Los medidas height y width deberán ir acorde a las medidas de la imagen.

Código:

<td background="http://www.dominio.com/imagen-fondo.jpg" height="402" width="600" bgcolor="#cccccc">
<!--[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:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.dominio.com/imagen-fondo.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:402px; width:600px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
<!-- This is where you nest a table with the content that will float over the image -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="402" valign="top">
Insert content here, including additional nested tables.
</td>
</tr>
</table>
<!-- This ends the nested table content -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>

Si lo que queremos es un fondo con una imagen repetido deberemos usar el siguiente código para el <body> y no para el <td> o la <table>

Código:

<body>
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
           <v:fill type="tile" src="http://www.dominio.com/images/imagenrepetida.gif" />
</v:background>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" background="http://www.dominio.com/images/imagenrepetida.gif">
        El resto del código de tu mail va aquí
    </td>
  </tr>
</table>

Según comentan, yo no lo he probado, funciona en todos estos gestores de correo:

    • AOL Mail (Explorer & FireFox)
    • AppleMail 3 & AppleMail 4
    • Gmail (Explorer & FireFox)
    • iPad
    • iPhone
    • Lotus Notes 8
    • Mail.com (Explorer & FireFox)
    • Me.com  (Explorer & FireFox)
    • Outlook 2002/XP, 2003, 20072010
    • Outlook Web Access
    • Postbox
    • Thunderbird 2.0 & 3.0
    • Windows Live Mail
    • Windows Mail
    • Windows Mobile 6.5
    • Yahoo! Mail  (Explorer & FireFox)

NO funciona en:

    • Lotus 6.5 / 7

Fuente: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

Esta entrada fue publicada en mailing y etiquetada , , , , , , , . Guarda el enlace permanente.

Una respuesta a Confeccionar email con imagenes de fondo y que se vean en Outlook 2007 y 2010

  1. SirJQ dijo:

    Muy buen tutorial.

    Sugiero esta pagina que lo hace automatico:

    http://backgrounds.cm/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>