Répéter background-image dans Outlook 2007/2010/2013 et Gmail

Mise à jour août 2013: je doute, c'est encore de l'utiliser pour John. B, mais je voulais juste donner une rapide mise à jour pour toute personne qui pourrait avoir ce problème.

J'ai été en mesure de résoudre le problème que j'ai décrit précédemment, et d'arrêter l'image de fond de jeter un oeil ci-dessous la solide arrière-plan de couleur.

Voici le code mis à jour:

<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
            <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
            <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0">
          <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="100"></td>
                        <td bgcolor="#ffffff" width="100">
                        The<br/>
                        background<br/>
                        image<br/>
                        on<br/>
                        the<br/>
                        left<br/>
                        will<br/>
                        stretch<br/>
                        to<br/>
                        the<br/>
                        height<br/>
                        of<br/>
                        this<br/>
                        content.
                        </td>
                    </tr>
                </table>
          <!--[if gte mso 9]>
              <p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
            </v:textbox>
          </v:rect>
          <![endif]-->
        </td>
    </tr>
</table>

Le correctif ici est la ligne

<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>

juste avant la fin de la zone de texte, et j'ai expliqué ce dans Microsoft Office TechCenter de fil que j'ai évoqué dans un précédent commentaire.

Ma réponse originale à cette question:

J'ai été en mesure de presque fissure, mais pas tout à fait. Donc je poste ici dans l'espoir que quelqu'un peut construire sur elle et après un travail entièrement solution.

Je suis sûr que vous ne pouvez pas obtenir une image de fond pour remplir une cellule de tableau ou d'une autre zone de undefined hauteur. Toutefois, vous pouvez utiliser un [VML zone de texte][1] et [VML Remplir Élément][2] autour de une table, avec une image de fond et de secours de la couleur définie, qui peut s'étendre à la hauteur du contenu.

À l'intérieur de cette zone de texte, vous pouvez ensuite placer un tableau à deux colonnes, où l'on a un fond transparent et l'autre dispose d'une solide couleur d'arrière-plan, pour émuler la mise en page que vous avez décrit.

Autour de la zone de texte, l'envelopper d'une autre table avec le même arrière-plan de l'image et de secours de la couleur, pour les non-clients de messagerie Outlook.

Maintenant, tout cela fonctionne bien, mais le problème que je vais avoir, c'est que les Perspectives/Mot moteur de rendu insiste sur l'ajout d'une ligne vide au-dessous de la table à l'intérieur de la zone de texte. Donc, bien que Outlook répétez l'image de fond le long du côté du contenu, il sera également ajouter une ligne de l'image d'arrière-plan à la totalité de la largeur de la table externe.

Test de la suite dans Outlook 2007+ pour voir ce que j'ai à ce jour:

<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
  <tr>
    <td>
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
        <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
        <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0"><span style="font-size: 0px;">
        <![endif]-->
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="100"></td>
            <td bgcolor="#ffffff" width="100">
              The<br/>
              background<br/>
              image<br/>
              on<br/>
              the<br/>
              left<br/>
              will<br/>
              stretch<br/>
              to<br/>
              the<br/>
              height<br/>
              of<br/>
              this<br/>
              content.
            </td>
          </tr>
        </table>
      <!--[if gte mso 9]>
        </span></v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  </table>

Quelques solutions que j'ai essayé:

• Une taille de police/hauteur de la ligne de la ligne vide à 0 (je l'ai fait dans l'exemple de code ci-dessus, mais il rend aussi 1px au lieu de 0)
• Utiliser un autre élément au lieu d'une table, afin d'éviter la ligne blanche.
  • <p>: Ne peut pas être défini pour une largeur fixe.
  • <div>: Ne peut pas avoir une couleur d'arrière-plan.
  • <span>: Ne peut pas être rendu comme un élément de niveau bloc.

J'espère que quelqu'un peut partager une solution à cette question en suspens. John B., si vous pouvez poster le code ou la mise en page que vous êtes en codage, et aussi l'image d'arrière-plan, qui sera également aider à déterminer les hacks pourrait fonctionner et que les restrictions doivent être pris en compte.

Si, par exemple, l'arrière-plan de l'image de 1px de haut répétition d'une image, vous pouvez utiliser une ligne de 1px de large cellules d'un tableau avec différentes couleurs de fond, à la place d'une image réelle.

[1]: http://msdn.microsoft.com/en-us/library/bb264073%28v=VS.85%29.aspx
[2]: http://msdn.microsoft.com/en-us/library/bb229596%28v=VS.85%29.aspx

Lorsque vous faites des courriels au format HTML, vous devez être conscient des différences qui existent entre les différents clients.

Ce guide peut vous aider. Par exemple, dans Outlook 2007/2010, background-repeat n'est pas pris en charge. Curieusement, il a été pris en charge dans la version 2003.

lol, Idiot développeurs. Verticale de répéter les arrière-plans avec aucun contenu ne peut être atteint facilement dans la plupart des principaux clients de messagerie en créant tout simplement un tableau complexe.

Par exemple, dans Jean est le cas, il pourrait facilement créer un "td width="1" bgcolor="#XXXXXX" /td" combinaisons à côté de son contenu principal "td" Qui tiendrait son contenu. Je vous suggère fortement d'imbrication d'une table à l'intérieur de votre contenu principal td de sorte que vous pouvez de manière fluide à contrôler les rembourrages et les hauteurs à l'intérieur.

Ce style de codage est la meilleure façon de parvenir à une verticale de mise en page liquide dans l'email de terre, je vais aller de l'avant et obtenir vous avez commencé. L'indentation est un peu hors sujet, mais c'est un mauvais code de modification de la situation et de ma fin de tableau ne s'affiche pas. De toute façon, vous obtenez l'idée.

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td width="1" bgcolor="#e4e4e4"></td>
    <td width="1" bgcolor="#e1e1e1"></td>
    <td width="1" bgcolor="#dadada"></td>
    <td width="1" bgcolor="#cfcfcf"></td>
    <td width="1" bgcolor="#c6c6c6"></td>
    <td valign="top" align="center" width="200">
        <!-- Main Content Cell -->
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top" align="center" height="200">
                    <!-- I can be whatever height and still not break this cell's makeshift background -->
                </td>
            </tr>
        </table>
        <!-- End Main Content Cell -->
    </td>
    <td width="1" bgcolor="#c6c6c6"></td>
    <td width="1" bgcolor="#cfcfcf"></td>
    <td width="1" bgcolor="#dadada"></td>
    <td width="1" bgcolor="#e1e1e1"></td>
    <td width="1" bgcolor="#e4e4e4"></td>
</tr>

Aussi, c'est après avoir pensé, mais j'avais utilisé cette langue pour outlook appelé VML. Il fonctionne à merveille pour les arrière-plans, toutefois, il ne faut pas faire répéter les choses. Vous pouvez consulter une bonne introduction ici: http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/