tabla - imagen de fondo html
Imagen de fondo en TD en Outlook 2007 (7)
Me han dicho que usar tablas es la mejor manera de enviar correos electrónicos, aunque ha sido el doble de difícil. Configuré el correo electrónico en tablas, establecí todas las celdas que necesitan fondos con la propiedad background="" , y también uso CSS en las etiquetas <style> diciendo lo mismo para cubrir mis bases. El fondo del cuerpo muestra una buena perspectiva, pero los fondos TD no. He intentado también usar pero eso tampoco funciona. He leído que Outlook 2007 no es compatible con las imágenes de fondo y no lo hará en el futuro. ¿Estoy pensando que tiene que haber una forma de evitarlo?
Afortunadamente, hay ajustes de formato que puede emplear para solucionar esto. Lo bueno es que hacer que su correo HTML sea compatible con Outlook 2007 puede disminuir las posibilidades de que termine en la carpeta de basura del destinatario. La desventaja es que puede tener que cambiar la forma en que aborda el formateo de partes de sus correos electrónicos, lo que afecta la apariencia de sus creatividades. A continuación se incluye una lista de elementos clave a tener en cuenta y posibles alternativas compatibles con Outlook 2007.
Imágenes de fondo: las imágenes de fondo no se mostrarán en Outlook 2007. Esto puede dejar un vacío grande e involuntario en su correo electrónico. Debe evitar usar imágenes de fondo por completo. Siempre que sea posible, debe usar etiquetas de imagen en línea. Si cree que debe usar una imagen de fondo, establezca un color de fondo apropiado para completar la imagen potencialmente perdida. Si tiene texto superpuesto a una imagen de fondo, puede editar la imagen para incluir el texto y usar un mapa de imagen para cualquier enlace.
Etiquetas de división: las etiquetas "Div" no son totalmente compatibles con Outlook 2007. Algunos de los atributos más comúnmente utilizados que se han omitido son: flotante, claro, de posición y relleno. Sin estos atributos, el posicionamiento con etiquetas div es virtualmente imposible. En su lugar, debe controlar el posicionamiento de su correo electrónico con una tabla estándar.
Formularios: los formularios no son compatibles con Outlook 2007. Los destinatarios de Outlook 2007 no podrán enviar ningún formulario incrustado en un correo electrónico. Si desea dar a los destinatarios la opción de completar un formulario, coloque un enlace a una versión en línea del mismo dentro del correo electrónico.
Flash y JavaScript: se recomienda que no intente utilizar Flash o Javascript en sus correos electrónicos HTML, debido a su falta de soporte en navegadores de correo electrónico (incluido Outlook 2007) y al hecho de que algunos filtros etiquetarán los correos electrónicos que contengan Flash o JavaScript. código. Además, la mayoría de los lectores de correo electrónico deshabilitarán automáticamente este contenido como medida de seguridad.
Lista con viñetas con imágenes: si bien las listas ordenadas y las no ordenadas son totalmente compatibles, las listas que usan imágenes como viñetas en lugar de viñetas estándar no lo son. Si necesita usar una imagen para sus viñetas, una solución posible es colocar su lista en una tabla de dos columnas, usando la columna de la izquierda para colocar sus viñetas.
GIF animados: los GIF animados no se animarán en Outlook 2007. Aparecerá la imagen, pero solo se mostrará el primer cuadro de la animación.
Etiquetas Alt: las etiquetas Alt tampoco son compatibles. Este es el texto que se muestra cuando una imagen no se carga al abrir un correo electrónico. Sin embargo, la mayoría de los lectores de correo electrónico admiten etiquetas alt, y no hay ningún efecto adverso en su correo electrónico compatible con Outlook 2007 (que no sea el hecho de que no se mostrarán) para que pueda continuar incluyéndolos en sus correos electrónicos si lo desea. .
Definiciones de tabla: como detallamos anteriormente, Outlook 2007 procesa los correos electrónicos HTML en Microsoft® Word, que es muy sensible a las etiquetas
<tr>o<td>adicionales y no se ajusta bien a las tablas de poco tamaño. Las versiones anteriores de Outlook abrirían correos electrónicos en Internet Explorer, lo que es muy indulgente con las pobres definiciones de tablas. Debe asegurarse de que las definiciones de su tabla sean correctas y de que los datos que está colocando dentro de la tabla se ajusten correctamente dentro del ancho de tabla definido.
Consulte este enlace para ver las etiquetas HTML y CSS admitidas en Outlook 2007:
http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx
MS también ofrece una herramienta de validación de HTML / CSS para Outlook 2007 en la URL anterior. Eso al menos puede proporcionarle un método de prueba.
He encontrado que "Menos es más", cuando se trata de correos electrónicos HTML: diseño simple, técnicas simples. Debido a que cada cliente de correo electrónico va a variar, la única forma de garantizar el alcance más amplio es "embrutecerlo".
He hecho MUCHOS correos electrónicos HTML y he descubierto que las imágenes de fondo NO son el camino a seguir sin usar algún truco.
Utilice siempre una etiqueta <img> en un TD para sus imágenes. Si desea texto sobre una imagen, inclúyalo en la imagen y repita el texto en el atributo alt de la etiqueta img.
Puedes ver uno que he hecho aquí . Utiliza muy pocas etiquetas CSS e img, además de que se procesa perfectamente en casi todos los clientes de correo electrónico.
Lamentablemente, con los correos electrónicos HTML, estamos un poco limitados a lo que podemos hacer, pero hay formas de evitarlo :)
Espero que ayuden :)
Puedes hacer esto, inside <td> where you want bg image place another table y haz esto.
<td> < !-- this is table where you want to set bg image -->
< table background="myimg.jpg" style="background-repeat:no-repeat;" >
here goes content
</table>
</td>
esto cubrirá todo y funciona perfectamente en perspectiva
Esto funcionó para mí:
<td background="http://www.thiespublishing.com/oneimage.gif" 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.thiespublishing.com/oneimage.gif"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style=''behavior: url(#default#VML); display:inline-block;position:absolute; height:407px; width:610px;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>
Imágenes de fondo de la celda de la tabla de ancho completo
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%" height="20">
<tr>
<td bgcolor="#dddddd" style="background-image:url(''http://placekitten.com/g/500/300'');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#33cc99">
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" style="background-image:url(''http://placekitten.com/g/500/300'');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- Probado en Outlook 2010 a través de Windows 7 VMWare en OSX 10.9.2
Las imágenes de fondo de la celda de la tabla de ancho completo
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%">
<tr>
<td bgcolor="#dddddd" style="background-image:url(''http://placekitten.com/g/500/300'');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- Probado en Outlook 2010 a través de Windows 7 VMWare en OSX 10.9.2
Imágenes de fondo especificadas de la celda de la tabla de ancho
Aquí hay un ejemplo, dos filas, la primera fila tiene 3 columnas con 3 imágenes de fondo separadas, la segunda fila abarca todo el recorrido como una imagen de fondo.
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 300px; height: 80px; background-image: url(''http://placekitten.com/g/300/80'');">
<!--[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; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;'' src="http://placekitten.com/g/300/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style=''behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;''>
<div>
<![endif]-->
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 100px; height: 80px; background-image: url(''http://placekitten.com/g/100/80'');">
<!--[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; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;'' src="http://placekitten.com/g/100/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style=''behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;''>
<div>
<![endif]-->
<table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 200px; height: 80px; background-image: url(''http://placekitten.com/g/200/100'');">
<!--[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; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;'' src="http://placekitten.com/g/200/100" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style=''behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;''>
<div>
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 150px; background-image: url(''http://placekitten.com/g/600/150'');">
<!--[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; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;'' src="http://placekitten.com/g/600/150" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style=''behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;''>
<div>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
- Probado en Outlook 2010 a través de Windows 7 VMWare en OSX 10.9.2
Es posible que haya leído antes acerca de nuestro enfoque para aplicar una imagen de fondo a un correo electrónico . Esto implicó no solo agregar una imagen de fondo a toda la página HTML, sino también envolver todo el contenido de una tabla con una imagen de fondo aplicada a ella. Sin embargo, existía una limitación en este método, ya que si bien podía aplicar una imagen de fondo a toda la tabla, no podía aplicar una a una celda de tabla individual. Gracias a uno de nuestros clientes estrella, Brian Thies , se nos mostró un pequeño código que no solo le permitirá agregar una imagen de fondo a una celda de la tabla , sino que también funciona en la mayoría de los principales clientes de correo electrónico ...
Esta técnica ... fuerza una imagen de fondo para mostrar en Outlook 2003/2007/2010 ...