Comment faire l'image de fond sur la newsletter dans outlook?
j'essaie de faire la newsletter où j'ai une image en arrière-plan et du texte dessus. C'est facile mais j'en ai besoin pour travailler 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 n'ai aucune idée de comment le résoudre. J'utilise outlook 2007.
Toute aide serait apprécier.
10 réponses
UP
outil puissant pour "Bulletproof email Background Images" (VML pour Outlook 2007/2010/2013, et HTML/CSS pour Outlook 2000/2003, Gmail, Hotmail...)
comme 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">
et
</td>
</tr>
</table>
</div>
afin d'avoir l'image d'arrière-plan spécifiée au corps de courriel complet.
ce lien aide pour utiliser le Vector Markup Language (VML)
msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx
www.w3.org/TR/NOTE-VML#_Toc416858389
vous ne pouvez pas ajouter une image de fond à un bulletin html qui doit être vu dans outlook. Ça ne marchera 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
j'ai pensé qu'il était préférable de mettre à jour cette liste car il obtient l'upvote étrange de temps en temps - un grand lien vers le soutien client email actuel est disponible ici: https://www.campaignmonitor.com/css /
Background ne fonctionne dans Outlook, mais seulement dans la balise <body> de l'email. Il ne fonctionnera pas dans l'individu <td> 's, seulement l'ensemble du message.
mise à jour: alternativement vous pouvez utiliser la méthode VML qui vous permet pour ajouter des images de fond à 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. Il a le fond-image réglé avec la retombée au fond dans une table 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 le faire est par ce code (tables TD). J'ai testé dans outlook client 2010. J'ai également testé via le client webmail et cela a fonctionné pour les deux.
la seule chose que vous devez faire est de changer votre _image.jpg (il y a deux instances pour la même image) et #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>
tous les HTML et CSS ne sont pas pris en charge par Microsoft Office products, Outlook en particulier; 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, à partir de ce lien, il n'est pas indiqué que la propriété CSS background est supportée pour les éléments div . Vous pourriez avoir à utiliser un img et faire quelques couches hacky.
noter qu'en votre deuxième exemple, vous avez une incohérence de devis, ce qui n'aidera pas.
enfin et quelque chose que je viens de rencontrer au lien fourni est le Outlook HTML et CSS Validator too l - vous pourriez essayer d'exécuter cela contre votre bulletin d'information markup et voir si elle vous donne des suggestions/alternatives.
j'ai eu exactement ce problème il y a quelques mois en travaillant sur un éditeur de messagerie WYSIWYG pour mon entreprise. Outlook ne supporte les images de fond que si elles sont appliquées à la balise <body> - tout autre élément et il échouera.
à la fin, la seule solution que j'ai trouvée était d'utiliser <div> élément pour la saisie de texte, puis au cours du processus de soumission de contenu, j'ai tiré une demande AJAX avec le <div> contenu à un script PHP qui a écrit le texte sur une version vierge de notre image d'en-tête, a enregistré le fichier et retourné son nom (généré de façon unique). J'ai ensuite utilisé Javascript pour supprimer le <div> et ajouter une étiquette <img> en utilisant le nom de fichier retourné dans l'attribut src .
vous pouvez obtenir toutes les informations/méthodologie de la page imagecreatefrompng() sur le PHP Docs site .
L'image de fond N'est pas prise en charge dans Outlook. Vous devez utiliser une image et la positionner derrière le texte en utilisant la position relative ou absolue.
vous pouvez l'utiliser seulement dans les étiquettes de corps ou dans les tables. Quelque chose comme ceci:
<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">
ça a marché pour moi.
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]-->
Note: incluez ce code au-dessus du tableau pour lequel l'image de fond est nécessaire. En outre, ajouter l'étiquette de fermeture mentionnée ci-dessous, après l'étiquette de fermeture de la table.
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->