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:
1.
<td width="100" height="100" style="background: url(''someurl'');">text</td>
2.
<td width="100" height="100" background="someurl">text</td>
3.
<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 ...)
como un ejemplo:
<div style="background-color:#f6f6f6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">
y
</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">
<!--[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:300px; width:600px; top:0; left:0; border:0; z-index:1;'' src="your_image.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style=''behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;''>
<![endif]-->
<p>Text over background image.</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
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">
<!-- BODY FAKE PANEL -->
<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>
<!-- CENTER FLOAT -->
<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>
<!-- /CENTER FLOAT -->
</td>
</tr>
</table>
<!-- /BODY FAKE PANEL -->
</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/