html - toda - ¿Cómo hacer una imagen de fondo en el boletín de noticias en perspectiva?

imagen de fondo html5 (9)

La imagen de fondo no es compatible con Outlook. Debe usar una imagen y colocarla detrás del texto usando la posición relativa o absoluta.

Intento crear un boletín en el que tenga una imagen como fondo y texto. Esto es fácil, pero necesito que esto funcione en la Ms Outlook . Ms Outlook .

Lo que he intentado:

<td width="100" height="100" style="background: url(''someurl'');">text</td>

<td width="100" height="100" background="someurl">text</td>

<td width="100" height="100"> <div style="width: 0px; height:0px; position: relative;"> <div style="width: 100px; height: 100px; position: absolute; background: url(''someurl'')"> text </div> </div> </td>

Pero nada funciona bien en outlook. No tengo idea de cómo solucionarlo. Estoy usando Outlook 2007.

Cualquier ayuda sería apreciada.

No todos los HTML y CSS son compatibles con productos de Microsoft Office, Outlook en particular; eche un vistazo aquí para obtener una referencia sobre los elementos compatibles con lo que puede y no puede usar en Outlook al representar HTML.

Específicamente, a partir de ese enlace no se indica que la propiedad CSS de background sea compatible con los elementos div . Puede que tengas que usar un img y hacer algunas capas de hacky.

Tenga en cuenta que en su segundo ejemplo tiene una discrepancia de cotización, que no ayudará a ninguna.

Por último, y algo que acabo de encontrar en el enlace proporcionado es el HTML de Outlook y el Validador de CSS también . Podría intentar ejecutar eso en comparación con el marcado de su boletín de noticias y ver si le da alguna sugerencia / alternativa.

Tuve exactamente este problema hace un par de meses mientras trabajaba en un editor de correo electrónico WYSIWYG para mi empresa. Outlook solo admite imágenes de fondo si se aplican a la etiqueta <body> , cualquier otro elemento y fallará.

Al final, la única solución que encontré fue usar el elemento <div> para la entrada de texto, luego durante el proceso de envío de contenido disparé una solicitud AJAX con el contenido de <div> a un script PHP que escribió el texto en un espacio en blanco versión de nuestra imagen de encabezado, guardó el archivo y devolvió su nombre (generado de manera única). Luego usé Javascript para eliminar el <div> y agregar una etiqueta <img> usando el nombre de archivo devuelto en el atributo src .

Puede obtener toda la información / metodología de la página imagecreatefrompng() en el sitio de PHP Docs .

Hay algo explicado aquí:

http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/

ARRIBA

Potente herramienta para "imágenes de fondo de correo electrónico a prueba de balas" (VML para Outlook 2007/2010/2013 y HTML / CSS para Outlook 2000/2003, Gmail, Hotmail ...)

http://emailbg.net

como un ejemplo:

<div style="background-color:#f6f6f6;">  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">

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

para tener la imagen de fondo especificada en el cuerpo completo del correo electrónico.

Este enlace ayuda a usar el Lenguaje de marcado de vectores (VML)

msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx

www.w3.org/TR/NOTE-VML#_Toc416858389

La única forma en que pude hacer esto fue a través de este código (tablas TD). Probé en Outlook Client 2010. También probé a través del cliente webmail y funcionó para ambos.

Lo único que tienes que hacer es cambiar your_image.jpg (hay dos instancias de esto para la misma imagen, asegúrate de actualizar ambos para tu código) y #your_color.

<td bgcolor="#your_color" background="your_image.jpg">  <p>Text over background image.</p>  </td>

fuente

Los antecedentes funcionan en Outlook, pero solo en la etiqueta <body> del correo electrónico. No funcionará en los <td> individuales, solo en todo el correo electrónico.

ACTUALIZACIÓN: Alternativamente puede usar el método VML que le permite agregar imágenes de fondo a elementos de página individuales en Outlook.

Esto funciona en la mayoría de los clientes, incluido Outlook:

<body style="background-image: url(''img.jpg'');"> <table width="100%" background="img.jpg">

Aquí está el código completo que funciona en todos los principales clientes de correo electrónico, incluido Outlook. Tiene una imagen de fondo configurada con respaldo al fondo en una tabla de 100% de ancho.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body style="margin: 0px; padding: 0px; background-image: url(''http://lorempixel.com/output/food-q-c-100-100-7.jpg''); background-color: #0D679C; background-position: top center;" bgcolor="#0D679C">  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/output/food-q-c-100-100-7.jpg"> <tr> <td>  <table width="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td height="1000" align="center" valign="middle"> Center panel </td> </tr> </table>  </td> </tr> </table>  </body> </html>

Puede usarlo solo en la etiqueta corporal o en tablas. Algo como esto:

<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">

Esto funcionó para mí.

no puede agregar una imagen de fondo a un boletín html que se va a ver en Outlook. Simplemente no funcionará, ya que ignoran la propiedad.

Solo puede tener colores de bloque ( background-color ) detrás del texto.

Outlook no es compatible con el siguiente CSS:

azimuth background-attachment background-image background-position background-repeat border-spacing bottom caption-side clear clip content counter-increment counter-reset cue-before, cue-after, cue cursor display elevation empty-cells float font-size-adjust font-stretch left line-break list-style-image list-style-position marker-offset max-height max-width min-height min-width orphans outline outline-color outline-style outline-width overflow overflow-x overflow-y pause-before, pause-after, pause pitch pitch-range play-during position quotes richness right speak speak-header speak-numeral speak-punctuation speech-rate stress table-layout text-shadow text-transform top unicode-bidi visibility voice-family volume widows word-spacing z-index

Fuente: http://msdn.microsoft.com/en-us/library/aa338201.aspx

ACTUALIZACIÓN - Julio 2015

Pensé que era mejor actualizar esta lista, ya que cada tanto aparece un raro vlog, un excelente enlace al soporte de cliente de correo electrónico actual está disponible aquí: https://www.campaignmonitor.com/css/