Images d'arrière-plan ne fonctionne pas dans Outlook 2007 et plus tard
J'ai fait un e-Mail HTML Modèle qui fonctionne bien dans la plupart des lecteurs de courrier électronique, mais les images de fond ne s'affichent pas dans Outlook 2007, 2010 et 2013. Comment puis-je résoudre le problème?
Voici le code HTML de l'e-mail:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
border: 0px;
outline: 0px;
}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body { -webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
img {max-width:100%;}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
<tr>
<td>
<table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
<tr>
<td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
</tr>
<tr>
<td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">
<img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
</tr>
<tr>
<td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
</tr>
<tr>
<td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">[email protected]!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
<tr>
<td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
</tr>
<tr>
<td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Avez-vous téléchargé les images lorsque vous vérifiez l'e-mail dans outlook?
double possible de la Pleine Largeur de l'arrière-plan Outlook '07/'10/'13
double possible de la Pleine Largeur de l'arrière-plan Outlook '07/'10/'13
OriginalL'auteur Joy_S | 2013-05-08
Vous devez vous connecter pour publier un commentaire.
E-mail-lecteur de support pour les images d'arrière-plan
Outlook 2007 et plus tard prend uniquement en charge les 2 façons d'afficher un bg image:
Dans les deux cas, Outlook échelle de l'image différemment des autres lecteurs de courrier électronique, et il n'y a aucun moyen de prévenir le bg de l'image de la mosaïque.
Donc, à toutes fins pratiques, les images de fond ne sont pas une option pour le soutien d'une vaste gamme de lecteurs de courrier électronique. Au lieu de cela, vous aurez besoin de faire plus avec au premier plan des images (
img
tags).Superposition d'éléments n'est pas une option
Outlook 2007+, Gmail, Hotmail et Yahoo Mail ne prennent pas en charge la CSS de positionnement. En conséquence, il n'y a pas moyen de placer un élément de texte sur une image de premier plan.
Pour le découpage de l'e-mail dans différents domaines (généralement à l'aide de tableaux HTML), chaque zone peut être soit un élément de texte ou d'une image au premier plan. Mais vous ne pouvez pas avoir les deux dans la même zone (c'est à dire, vous ne pouvez pas avoir deux éléments occuper le même espace ou qui se chevauchent).
Solutions
Pour les zones où il y a une image sans texte, sur le sommet de la partie de l'e-mail peut être coupée séparément, comme une image de premier plan.
Pour les zones où il y a une image avec du texte dessus, il y a 3 options:
Dans la modération, l'option n ° 1 est généralement sûr et raisonnable. Mais lorsqu'il est utilisé massivement, il conduit à un ratio très élevé d'images, de texte dans l'e-mail, ce qui peut provoquer certains filtres anti-spam. Avant de faire une utilisation intensive de l'option #1, test de l'e-mail dans une variété de filtres anti-spam.
Avant de continuer avec les options #2 ou #3, vous devrez peut-être régler ça avec les concepteurs (que ce soit un compromis de la conception dans Outlook 2007+). Dans la grande image, les images d'arrière-plan doit être utilisé avec parcimonie lors de la conception d'e-mails. Il peut être utile de souligner les concepteurs de l'impact de l'utilisation d'images d'arrière-plan.
Oui, c'est correct. Vous ne pouvez pas placer du texte sur une image. Plus généralement, vous ne pouvez pas placer n'importe quel type d'élément sur un autre élément, ou faire deux éléments se chevauchent. J'ai édité la réponse à essayer de rendre cela un peu plus clair.
Désinvolte, le VML code nécessaires pour le faire est lui-même un très fort argument contre l'utilisation d'images d'arrière-plan dans les e-mails HTML 🙂 Aussi, cette utilisation de la VML semble causer de la style pour le contenu à l'intérieur de l'élément affecté. Je ne suis pas convaincu VML est une option réalisable.
Je n'ai pas vraiment expérimenté avec beaucoup de moi-même, mais il y a un peu de répondre posts sur le style de problèmes avec le lien que vous avez compris que poliment litige les conclusions de ses travaux. Il y a quelques vétéran e-mail les concepteurs dans la communauté (qui, personnellement, j'ai plus confiance) que dire que cela fonctionne, mais en fin de compte avec l'email, vous avez toujours à concéder qu'il y a probablement des compromis quelque part le long de la ligne. Peu importe, je pense que c'est une alternative qui mérite d'inclusion en tant que technique.
OriginalL'auteur Matt Coughlin
Outlook ne prend en charge les images de fond dans la balise body, sauf si vous utilisez VML. Check this out pour VML: http://backgrounds.cm/
Voici un exemple de travail dans la balise body.
OriginalL'auteur John
Je pense que vous trouverez cela très pratique: http://www.campaignmonitor.com/css/
Outlook 2007-13 ne prend pas en charge la propriété background-image, donc il n'y a aucune bonne façon de résoudre cela.
Basée sur l'expérience personnelle: Pour obtenir le plus d'expérience cohérente à travers les clients de messagerie, je la refonte de l'e-mail pour ne pas nécessiter une image d'arrière-plan.
OriginalL'auteur BjornJohnson
background-image
n'est pas pris en charge dans Outlook ou Gmail sur Android 2.3. Voir: http://www.campaignmonitor.com/css/J'ai l'habitude d'utiliser
background-color
comme un secours, ou si l'image de fond est nécessaire, la partie texte de l'image.Vous êtes à l'aide de plusieurs éléments que je considère la dégradation gracieuse, comme
text-shadow
, qui ne fonctionne pas dans les clients de messagerie comme Outlook. Donc, dans ce cas, je pense que le réglage debackground-color:#8a17aa;background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');
serait une solution viable.Oui, j'ai déjà utilisé ce style de background-image, mais la couleur est à la recherche presque la même. Merci.
OriginalL'auteur samanthasquared
Image d'arrière-plan ne sera pas pris en charge dans outlook 2007+
Utilisation VML ( Vector Markup Language (VML) est un format de fichier XML pour deux dimensions graphiques vectoriels. ) afin d'obtenir un soutien
par exemple :
Lien D'Aide : http://backgrounds.cm/
Spécifiques À Outlook
/* Votre Outlook CSS spécifiques se passe ici. */
‘mso 9’ Office 2000
Outlook 2000 - Version 9
Outlook 2002 Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
http://templates.mailchimp.com/development/css/outlook-conditional-css/
OriginalL'auteur Prasanth
Vous pouvez le faire en utilisant la bonne VML. Ci-dessous codepiece fonctionne le mieux pour moi:
OriginalL'auteur Peter
Nous pouvons ajouter cette façon :-
Ajouter le suivant juste après la balise d'ouverture...
...et ce juste avant la balise de fermeture.
OriginalL'auteur Deepak Kumar
Octobre 2018 - Testé dans Outlook 2016
Pensé que je serais carillon avec la VML extrait de ce qui a fonctionné pour moi. Prises de https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16
Autres VML extraits travaillé dans une mesure, mais j'ai eu des problèmes avec l'image de disparaître après la sortie de l'e-mail et de revenir, ou pas de chargement jusqu'à ce que le fond a été cliqué.
OriginalL'auteur Gabe
Je viens de tomber sur ce problème lors de la création vrac, emailer modèles dans MailChimp.
Alors que le client Outlook logiciel permet uniquement la balise body origines, ce sont supprimés par webmail sites comme Outlook, webmail (hotmail), gmail, etc.
La même chose est également vrai dans le sens inverse... client Outlook bandes de la table images d'arrière-plan, tandis que le webmail de ses clients, la table origines.
Solution: utiliser les deux:
Dans Mailchimp lui-même, ce qui semble d'affichage à tort - que vous pouvez voir le bord de l'arrière-plan du corps sur les bords de la table en arrière-plan, mais au moment où il atteint le destinataire, que ce soit l'un ou l'autre est supprimé selon qu'ils sont à l'aide de logiciel client Outlook ou Hotmail/Gmail, le webmail.
Je suis encore à essayer dans d'autres programmes clients de messagerie ou webmail, donc je ne sais pas si il en existe d'autres qui s'affichent à la fois. Si quelqu'un a déjà essayé cette méthode avec d'autres logiciels clients de messagerie ou webmail autre que Hotmail ou Gmail, j'aurais beaucoup aimé savoir si cette solution est universelle.
OriginalL'auteur Phil P