Comment faire l'image de fond sur le bulletin d'information dans les perspectives?

J'essaie de faire de la newsletter où j'ai une certaine image comme arrière-plan et du texte. C'est facile, mais j'ai besoin de ce travail 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. Je suis à l'aide d'outlook 2007.

Toute aide serait appréciée.

source d'informationauteur Mateusz Rogulski

  1. 24

    JUSQU'

    Outil puissant pour "pare-Balles Email Images d'arrière-plan" (VML pour Outlook 2007/2010/2013, et HTML/CSS pour Outlook 2000/2003, Gmail, Hotmail...)

    http://emailbg.net

    comme un 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 spécifié image d'arrière-plan pour le Plein corps du message électronique.

    Ce lien d'aide pour utiliser le Vector Markup Language (VML)

    msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx

    http://www.w3.org/TR/NOTE-VML#_Toc416858389

  2. 15

    vous ne pouvez pas ajouter une image de fond à un html bulletin d'information qui est à être vu dans outlook. Il juste ne travail, comme ils ignorent la propriété.

    Vous ne pouvez avoir des couleurs de bloc (background-color) derrière le texte.

    Outlook ne prend pas en charge le code CSS suivant:

    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 valait mieux mettre à jour cette liste qu'il obtient l'étrange upvote chaque maintenant et puis - un grand lien d'e-mail actuelle de support client est disponible ici: https://www.campaignmonitor.com/css/

  3. 6

    Expérience de travail dans Outlook, mais seulement dans le <body> balise de l'e-mail. Il ne fonctionnera pas dans individu <td>'s, seulement l'ensemble du message.

    Mise à JOUR: vous pouvez utiliser la méthode VML qui vous permet
    pour ajouter des images d'arrière-plan à la page individuelle des éléments 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 background-image avec secours à l'arrière-plan dans un 100% de la largeur de la table. 

    <!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>
  4. 1

    La seule façon que j'ai été en mesure de le faire est par le biais de ce code (TD tables). Je l'ai testé dans le client outlook 2010. J'ai aussi testé via le webmail client, et il a travaillé pour deux.

    Les seules choses que vous avez à faire est de changer your_image.jpg (il y a deux instances de ce pour la même image, assurez-vous de mettre à jour votre code) 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>

    source

  5. 0

    Pas tout le code HTML et CSS est pris en charge par les produits de Microsoft Office, Outlook, en particulier; prendre un regardez ici pour référence sur les éléments pris en charge pour ce que vous pouvez et ne pouvez pas utiliser dans Outlook lorsque le rendu HTML.

    Plus précisément, à partir de ce lien, il ne fait pas état de la background propriété CSS est pris en charge pour div éléments. Vous pourriez avoir à utiliser un img et faire un peu de hacky superposition.

    Remarque que dans ton deuxième exemple, vous avez un devis d'incompatibilité, ce qui ne va pas aider tout.

    Enfin et quelque chose que je viens de découvrir sur le lien fourni est le Outlook HTML et CSS Validator tropl " - vous pouvez essayer de course que contre votre bulletin de balisage et de voir si cela vous donne des suggestions/solutions de rechange.

  6. 0

    J'ai eu exactement ce problème il y a quelques mois, tout en travaillant sur un WYSIWYG éditeur de messagerie pour mon entreprise. Outlook prend uniquement en charge les images d'arrière-plan si ils sont appliqués à la <body> tag - tout autre élément et il va échouer.

    En fin de compte, la seule solution que j'ai trouvé est d'utiliser <div> élément pour la saisie de texte, puis, pendant le processus de soumission de contenu, j'ai tiré une requête AJAX avec le <div>'contenu d'un script PHP qui a écrit le texte sur une version vierge de notre image d'en-tête, le fichier a été enregistré et est retourné à son (unique généré) nom. J'ai ensuite utilisé du Javascript pour supprimer le <div> et ajouter un <img> balise en utilisant le nom de fichier renvoyé dans le src attribut.

    Vous pouvez obtenir toutes les infos/méthodologie de l' imagecreatefrompng() page sur le PHP Docs site.

  7. 0

    Image d'arrière-plan n'est pas pris en charge dans Outlook.
    Vous devez utiliser une image et la placer derrière le texte à l'aide de la position relative ou absolue.

  8. 0

    Vous pouvez l'utiliser seulement dans la balise body ou dans des tableaux. Quelque chose comme ceci:

    <table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">

    Cela a fonctionné pour moi.