Pendant longtemps, l’intégration d’images en arrière-plan dans les emailings a été vivement déconseillée car reconnue pour être incompatible entre les différents clients de messagerie. Outlook 2007-10 et Google Gmail sont d’ailleurs réputés pour être capricieux sur ce sujet.
Grâce à l’avancée technologique grandissante du Web, cette intégration est dorénavant possible. Nous allons découvrir comment inclure ces images de fond directement dans une cellule d’un tableau.
Pour commencer, intégrer votre emailing comme à votre habitude (imbrication de tableaux, styles en ligne, …). Une fois arrivé à la cellule, qui accueillera l’image de fond, ajouter lui l’attribut « background », ainsi que le style « background-image » (au cas où l’attribut « background » ne serait pas interprété). Il est aussi conseillé d’ajouter l’attribut « bgcolor » (et le style « background-color »), notamment pour l’affichage sans image d’un emailing.
Pour assurer une visibilité optimale sur des clients email tels que Outlook 2007 et 2010, nous allons utiliser une technique dite « VML HACK », utilisant la technologie Microsoft VML pour forcer l’affichage des images de fond. Voici un exemple d’application de ce « VML HACK » :
<td height="400" width="500" align="left" valign="top" background="votre-image-en-arriere-plan.jpg" bgcolor="#020202" style="font-size:0; background-color: #020202; background-image:url('votre-image-en-arriere-plan.jpg');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:500px;height:400px;">
<v:fill type="tile" src="votre-image-en-arriere-plan.jpg" color="#020202" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<p>Votre contenu</p>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
Afin que cette technique soit fonctionnelle, il est nécessaire d’effectuer une déclaration spécifique au niveau de la balise HTML :
<html xmlns:v="urn:schemas-microsoft-com:vml">
Pour les personnes réticentes à l’idée d’écrire du code Microsoft VML, voici un lien permettant de générer ce code dynamiquement : http://backgrounds.cm/.
Pour conclure, cette méthode s’avère fiable mais seulement avec des clients de messagerie récents. Des clients tels que Lotus Note 6.5 et 7 ne sont pas capables d’interpréter les background-image. Cette technique est donc à utiliser en dernier recours.Pendant longtemps, l’intégration d’images en arrière-plan dans les emailings a été vivement déconseillée car reconnue pour être incompatible entre les différents clients de messagerie. Outlook 2007-10 et Google Gmail sont d’ailleurs réputés pour être capricieux sur ce sujet.
Grâce à l’avancée technologique grandissante du Web, cette intégration est dorénavant possible. Nous allons découvrir comment inclure ces images de fond directement dans une cellule d’un tableau.
Pour commencer, intégrer votre emailing comme à votre habitude (imbrication de tableaux, styles en ligne, …). Une fois arrivé à la cellule, qui accueillera l’image de fond, ajouter lui l’attribut « background », ainsi que le style « background-image » (au cas où l’attribut « background » ne serait pas interprété). Il est aussi conseillé d’ajouter l’attribut « bgcolor » (et le style « background-color »), notamment pour l’affichage sans image d’un emailing.
Pour assurer une visibilité optimale sur des clients email tels que Outlook 2007 et 2010, nous allons utiliser une technique dite « VML HACK », utilisant la technologie Microsoft VML pour forcer l’affichage des images de fond. Voici un exemple d’application de ce « VML HACK » :
Votre contenu
Afin que cette technique soit fonctionnelle, il est nécessaire d’effectuer une déclaration spécifique au niveau de la balise HTML : .
Pour les personnes réticentes à l’idée d’écrire du code Microsoft VML, voici un lien permettant de générer ce code dynamiquement : http://backgrounds.cm/.
