it-swarm.com.de

Wie kann man das Hintergrundbild auf dem Newsletter in Aussicht stellen?

Ich versuche einen Newsletter zu erstellen, bei dem ich ein Bild als Hintergrund und Text habe. Das ist einfach, aber ich brauche es, um an MS Outlook zu arbeiten.

Was ich versucht habe:

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>

Aber nichts funktioniert gut in Outlook. Ich habe keine Ahnung, wie das Problem behoben werden kann. Ich verwende Outlook 2007. 

Jede Hilfe wäre dankbar.

18

Leistungsstarkes Tool für "Bulletproof Email Background Images" (VML für Outlook 2007/2010/2013 und HTML/CSS für Outlook 2000/2003, Gmail, Hotmail ...)

http://emailbg.net

als beispiel:

    <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">
      </td>
    </tr>
  </table>
</div>

um das angegebene Hintergrundbild als vollständigen E-Mail-Text anzuzeigen.

Dieser Link hilft bei der Verwendung der Vector Markup Language (VML)

msdn.Microsoft.com/de-de/library/bb264137%28v=vs.85%29.aspx

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

24
laurent

sie können einem html-Newsletter, das in Outlook angezeigt werden soll, kein Hintergrundbild hinzufügen. Es funktioniert einfach nicht, da sie die Immobilie ignorieren.

Sie können hinter dem Text nur Blockfarben (background-color) haben. 

Outlook unterstützt das folgende CSS nicht:

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

Quelle: http://msdn.Microsoft.com/de-de/library/aa338201.aspx

UPDATE - Juli 2015

Ich dachte, es wäre am besten, diese Liste zu aktualisieren, da sie ab und zu die ungeraden Aktualisierungen erhält - ein großartiger Link zum aktuellen E-Mail-Client-Support ist hier verfügbar: https://www.campaignmonitor.com/css/

Hintergrund funktioniert in Outlook, jedoch nur im <body>-Tag der E-Mail. Es funktioniert nicht in einzelnen <td>s, nur in der gesamten E-Mail. 

UPDATE: Alternativ können Sie die VML-Methode verwenden , die Ihnen ermöglicht Hinzufügen von Hintergrundbildern zu einzelnen Seitenelementen in Outlook.

Dies funktioniert bei den meisten Clients einschließlich Outlook:

<body style="background-image: url('img.jpg');">
<table width="100%" background="img.jpg">

Hier ist der vollständige Code, der in allen großen E-Mail-Clients einschließlich Outlook funktioniert. In einer Tabelle mit 100% Breite ist ein Hintergrundbild mit Fallback auf den Hintergrund festgelegt. 

<!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>
7
John

Die einzige Möglichkeit, dies zu erreichen, ist über diesen Code (TD-Tabellen). Ich habe in Outlook-Client 2010 getestet. Ich habe auch über Webmail-Client getestet, und es funktionierte für beide.

Sie müssen lediglich your_image.jpg ändern (es gibt zwei Instanzen für dasselbe Bild, und stellen Sie sicher, dass Sie sowohl den Code aktualisieren) als auch #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>

Quelle

1
grepit

Sie können es nur im Body-Tag oder in Tabellen verwenden. Etwas wie das:

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

Das hat bei mir funktioniert.

0
Lucas

Ich hatte vor ein paar Monaten genau dieses Problem, als ich an einem WYSIWYG-E-Mail-Editor für mein Unternehmen arbeitete. Outlook unterstützt nur Hintergrundbilder, wenn sie auf das <body>-Tag angewendet werden. Jedes andere Element schlägt fehl.

Am Ende war die einzige Lösung, die ich gefunden habe, die Verwendung des <div>-Elements für die Texteingabe, und während des Inhaltsübermittlungsprozesses habe ich eine AJAX -Anforderung mit dem Inhalt des <div> an ein PHP -Skript ausgelöst, in das der Text geschrieben wurde Eine leere Version unseres Headerbildes hat die Datei gespeichert und ihren (eindeutig generierten) Namen zurückgegeben. Dann habe ich Javascript verwendet, um den <div> zu entfernen und einen <img>-Tag mit dem zurückgegebenen Dateinamen im src-Attribut hinzuzufügen.

Alle Informationen/Methoden finden Sie auf der imagecreatefrompng()-Seite der Docs-Site PHP .

0
Ultrabenosaurus

Sie können den folgenden Code verwenden:

<!--[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]-->

Hinweis: Fügen Sie diesen Code oberhalb der Tabelle ein, für die das Hintergrundbild benötigt wird. Fügen Sie nach dem schließenden Tag der Tabelle auch das schließende Tag hinzu.

<!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
<![endif]-->
0
Muskan Upadhyay

Hintergrundbild wird in Outlook nicht unterstützt .. Sie müssen ein Bild verwenden und es hinter dem Text mit der Position relativ oder absolut positionieren.

0
Baronth

Nicht alle HTML- und CSS-Komponenten werden von Microsoft Office-Produkten unterstützt, insbesondere von Outlook. Nehmen Sie ein hier als Referenz über unterstützte Elemente nach, was Sie beim Rendern von HTML in Outlook verwenden können und was nicht.

In diesem Link wird nicht angegeben, dass die background-CSS-Eigenschaft für div-Elemente unterstützt wird. Möglicherweise müssen Sie eine img verwenden und etwas hacky Layering durchführen.

Beachten Sie, dass Sie in Ihrem zweiten Beispiel ein nicht übereinstimmendes Zitat haben, was Ihnen nicht weiterhilft.

Zu guter Letzt stieß ich gerade auf den Link, den/- Outlook HTML- und CSS-Validator. l - Sie könnten versuchen, dies mit Ihrem Newsletter-Markup auszuführen und zu sehen, ob es irgendwelche Vorschläge/Alternativen gibt.

0
Grant Thomas
0