Verwendung von Hintergrundbildern im Newsletter

Es gibt grundsätzlich zwei Möglichkeiten, wie ich Hintergrundbilder in einem Newsletter verwenden kann. Diese möchten wir Ihnen hier gerne vorstellen - doch beachten Sie bitte, dass die Unterstützung in den jeweiligen E-Mail Clients nicht garantiert werden kann.

Alle Werte die im Beispiel in einer [...] stehen, müssen von Ihnen durch einen Bildpfad oder Farbwert ersetzt werden.

Hintergrundbild hinter gesamten Newsletter

<body>
    <div style="background-color: [Standardfarbe]">
      <!--[if gte mso 9]>
      <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
           <v:fill type="tile" src="[Bildpfad]" color="[Standardfarbe]" />
       </v:background>
       <![endif]-->
        <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                  <td valign="top" align="left" background="[Bildpfad]">Inhalt</td>
             </tr>
         </table>
      </div>
</body>

Hintergrundbild hinter einem gewissen Bereich

<td background="[Bildpfad]"  bgcolor="[Standardfarbe]"  width="120" height="92" valign="top">
	<!--[if gte mso 9]>
	<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
		<v:fill type="tile src="[Bildpfad]" color="[Standardfarbe]"  />
			<v:textbox inset="0,0,0,0">
				<![endif]-->
				<div>
					Inhalt
				</div>
				<!--[if gte mso 9]>
			</v:textbox>
	</v:rect>
	<![endif]-->
</td>

Bei dieser Möglichkeit muss eine fixe Höhe hinterlegt werden, da sich ansonsten das Hintergrundbild in allen Richtungen wiederholen kann. Die Höhe kann auch variabel gesetzt werden, dafür müssen Sie den Code ein wenig anpassen.

Einschränkungen im Outlook

  • Ausrichtung rechts und unten ist hier nicht möglich.
  • Zu hohe Bildqualität verursacht hier lange Ladezeiten.
  • Darstellung im Client kann nicht garantiert werden.

Newsletter Anmeldung

Tipps, Tricks und viele weitere nützliche Informationen direkt in Ihre Mailbox. Jetzt mailworx Newsletter abonnieren!