Comment faire de l'image de fond sur la newsletter dans Outlook?
J'essaie de créer un bulletin d'information contenant une image d'arrière-plan et du texte. C’est facile, mais j’ai besoin que cela fonctionne sur MS Outlook.
Ce que j'ai essayé
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>
Mais rien ne fonctionne bien sur Outlook. Je ne sais pas comment le réparer. J'utilise Outlook 2007.
Toute aide serait appréciée.
Outil puissant pour "Bulletproof Email Background Images" (VML pour Outlook 2007/2010/2013 et HTML/CSS pour Outlook 2000/2003, Gmail, Hotmail ...)
à titre d'exemple:
<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">
</td>
</tr>
</table>
</div>
afin d’avoir l’image d’arrière-plan spécifiée dans le corps complet de l’e-mail.
Ce lien aide à utiliser le langage VML (Vector Markup Language)
vous ne pouvez pas ajouter d'image d'arrière-plan à un bulletin d'information html qui doit être consulté dans Outlook. Cela ne fonctionnera tout simplement pas, car ils ignorent la propriété.
Vous ne pouvez avoir que des couleurs de bloc (background-color) derrière le texte.
Outlook ne supporte pas les CSS suivants:
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
Source: http://msdn.Microsoft.com/en-us/library/aa338201.aspx
MISE À JOUR - Juillet 2015
Je pensais qu'il était préférable de mettre à jour cette liste car elle reçoit de temps en temps un vote invétéré. Un excellent lien vers le support client de messagerie actuel est disponible ici: https://www.campaignmonitor.com/css/
Background NE FONCTIONNE PAS dans Outlook, mais uniquement dans la balise <body> de l'e-mail. Cela ne fonctionnera pas dans les <td> individuels, mais dans tout l'e-mail.
UPDATE: Vous pouvez également utiliser la méthode VML qui vous permet ajouter des images d’arrière-plan à des éléments de page individuels dans Outlook.
Cela fonctionne dans la plupart des clients, y compris Outlook:
<body style="background-image: url('img.jpg');">
<table width="100%" background="img.jpg">
Voici le code complet qui fonctionne dans tous les principaux clients de messagerie, y compris Outlook. Son image d'arrière-plan est définie avec un repli sur l'arrière-plan dans un tableau de largeur de 100%.
<!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>
La seule façon dont j'ai pu faire cela est via ce code (tables TD). J'ai testé dans le client Outlook 2010. J'ai également testé via le client webmail et cela a fonctionné pour les deux.
La seule chose que vous ayez à faire est de changer votre_image.jpg (il y a deux instances pour la même image, assurez-vous de mettre à jour votre code) et #votre_couleur.
<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>
Vous pouvez l'utiliser uniquement dans les balises body ou dans les tables. Quelque chose comme ça:
<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">
Cela a fonctionné pour moi.
J'ai eu exactement ce problème il y a quelques mois alors que je travaillais sur un éditeur de messagerie WYSIWYG pour mon entreprise. Outlook ne prend en charge les images d’arrière-plan que si elles sont appliquées à la balise <body> - à n’importe quel autre élément et cela échouera.
En fin de compte, la seule solution que j'ai trouvée consistait à utiliser l'élément <div> pour la saisie de texte, puis lors du processus de soumission du contenu, j'ai envoyé une demande AJAX contenant le contenu de <div> à un script PHP dans lequel le texte était écrit. une version vierge de notre image d'en-tête, a sauvegardé le fichier et a renvoyé son nom (généré de manière unique). J'ai ensuite utilisé Javascript pour supprimer le <div> et ajouter une balise <img> en utilisant le nom de fichier renvoyé dans l'attribut src.
Vous pouvez obtenir toutes les informations/méthodologies de la page imagecreatefrompng() sur le site PHP Docs .
Vous pouvez utiliser le code ci-dessous:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-Microsoft-com:vml" fill="true" stroke="false"
style="width: 700px; height: 460px;">
<v:fill type="tile" src="images/feature-background-01.png" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Remarque: incluez ce code au-dessus du tableau pour lequel l'image d'arrière-plan est nécessaire. Ajoutez également la balise de fermeture mentionnée ci-dessous, après la balise de fermeture du tableau.
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
L'image d'arrière-plan n'est pas prise en charge dans Outlook . Vous devez utiliser une image et la positionner derrière le texte à l'aide de position relative ou absolue.
Tous les codes HTML et CSS ne sont pas pris en charge par les produits Microsoft Office, notamment Outlook; prenez un regardez ici pour référence sur les éléments supportés pour ce que vous pouvez et ne pouvez pas utiliser dans Outlook lors du rendu HTML.
Plus précisément, ce lien n'indique pas que la propriété CSS background est prise en charge pour les éléments div. Vous devrez peut-être utiliser un img et faire une superposition de hacky.
Notez que dans votre deuxième exemple, vous avez une discordance de citation qui n’aide en rien.
Enfin, quelque chose que je viens de découvrir sur le lien fourni est le Validateur Outlook HTML et CSS aussi l - vous pouvez essayer de le lancer contre votre balise de newsletter et de voir s’il vous donne des suggestions/alternatives.