HTML Newsletter Backgroundimage....

Sundream

Hallo ihr Lieben,

ich möchte einen HTML-Newsletter versenden und suche gerade nach einer Lösung das Backgroundimage auch im Outlook und auch ansonsten überall richtig anzeigen zu lassen..
Ich habe den Newsletter jetzt mit Tabellen aufgebaut...

Gibt es irgendeine Universallösung?

Vielen Dank schonmal!

Liebe Grüße

Sundream

Bandit

Wen du den phpMailer zum Versenden nutzt, kannst du ein embedded Image als Hintergrund nutzen.

Sundream

Nein, ich verwende ein "Programm" das Mailingwork heißt, in das reines HTML mit CSS eingegeben wird.

- - - Aktualisiert - - -

Allgemein ist das der Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Weihnachts-Newsletter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
</head>


<body background="https://login.mailingwork.de/public/a_4558_TV84t/file/data/37_Hintergrund4.jpg" valign="middle" align="center" style=" padding: 0; padding: 0px;  width:652px; height:auto;display:block;margin: auto; background-size:652px;" >
 <style type="text/css">
     body {


background-image: url('https://login.mailingwork.de/public/a_4558_TV84t/file/data/37_Hintergrund4.jpg');


background-repeat: no-repeat;


background-color: white;




margin: auto;


padding: 0;
background-position:center;




}


 </style>




[INDEX name='index_1' container='container_1']
  [TOP]<div >[/TOP]
  [BETWEEN]<br>[/BETWEEN]
  [BOTTOM]</div>[/BOTTOM]
[/INDEX]


[CONTAINER name='container_1']
      [ELEMENT name='element_1' default='true']
            [INDEXITEM]<a href="[INDEXITEMANCHOR /]">[INDEXITEMNAME /]</a>[/INDEXITEM]
                <div class="background" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;font-weight:300;">
              [ELEMENTTOOLS]<div>[ANCHOR /][UPDATE /] [COPY /] [REMOVE /]</div>
          [/ELEMENTTOOLS]




<table   align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;font-weight:300; ">


      [BLOCK name='block_11' edit='true'] 
                      <tr>
                           <td  width="100%" align="center" valign="middle" style="font-family: Verdana,Helvetica,sans-serif; font-size: 12px; color: #999999;">   
                        <span><br><br></span>
                                  [INPUT name='Feld_8' type='text' default='' index='false' /]
                                 Wenn diese Mail nicht richtig dargestellt wird, dann klicken Sie bitte <a  style="color: #999999; text-decoration: underline;" href="[CONTAINER name='Link zur Onlinedarstellung'][ELEMENT name='Link zur Onlinedarstellung' edit='false'][INDEXITEM]<a href=“[VIEWONLINE /]“ target=“_blank“>Hier zur Onlineansicht</a>[/ELEMENT][CONTAINERTOOLS][CREATE][SORT][/CONTAINERTOOLS][/CONTAINER]" title="Online ansehen">hier</a>.</td>
                      </tr>
                     [/BLOCK]

  </table>


<table border="0" cellpadding="0" cellspacing="0" width="652px" style="font-size:14px;margin-top:27%;font-weight:300; margin-left:42px;">                    

    [BLOCK name='block_6' edit='true'] 
 <tr>
 <td style="font-family:'Arial';  font-size: 30px; width:100%; font-weight:200; ">


   ÜBERALL BUNTE LICHTER<br>
       UND ES SCHNEIT,<br>
     <span style="font-weight:600;">ES IST WIEDER WEIHNACHTSZEIT</span> 
 </td>
</tr>


<tr >
 <td style=" font-family:'Arial';">
      <br><br><span>[INPUT name='anredetitel' label='Begrüßungszeile' type='char' required='true' default='[formelleAnrede /]']</span><br>
         <br><span style="font-weight:600;">LOREM IPSUM</td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
 </td>
</tr>


<tr>
 <td style="font-family:'Arial'; ">
  LOREM IPSUM
 </td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
 </td>
</tr>


<tr>
 <td style="font-family:'Arial';">
     LOREM IPSUM
 </td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
</tr>


<tr>
 <td style=" font-family:'Arial';">
        LOREM IPSUM
 </td>
</tr>


<tr >
 <td style="font-family:'Arial';font-weight:600;">
      <br>LOREM IPSUM
 </td>
</tr>


<tr>
 <td style="font-family:'Arial';">
       LOREM IPSUM
 </td>
</tr>






<tr>
 <td style="font-family:'Arial';">
      <br>
      <br>
        Mit festlichen Grüßen <br>
[INPUT name='Absender' label='Absendername' type='char' required='true' default='[Absender /]'] <br>
<span style="font-size:12px;">LOREM IPSUM</span></td>




</tr>




 </table>




<table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;margin-top:-11%;font-weight:300;margin-left:450px;margin-bottom: 350px">
    <tr >
 <td style=" font-size: 12px;font-weight:300;margin-top: -18%; font-family:'Arial';">
        Telefon:<br>
 [INPUT name='Telefon-Absender' label='Telefon-Absender' type='char' required='true' default='[Telefon-Absender /]'] <br><br>


        E-Mail:<br>
 [INPUT name='EMail-Absender' label='EMail-Absender' type='char' required='true' default='[EMail-Absender /]']
 </td>


</tr>   
    [/BLOCK]


</table>




    [BLOCK name='block_10' edit='true'] 
                  <table style=" margin-bottom:35px;margin-left:4px;margin-top:28em;">
                  <tr>
                           <td width="100%" align="left" valign="middle" style="font-family: Verdana,Helvetica,sans-serif; font-size: 12px; color: #999999;text-align:center;  ">      
                                 <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                  Sie erhalten diese E-Mail, weil wir uns bei unseren Kunden für das erfolgreiche Jahr bedanken möchten und auf diesem Wege gleichzeitig Weihnachtgrüße versenden möchten. <br/>
               Sollten Sie Email dieser Art nicht mehr erhalten wollen, können Sie sich <a style="color:#999999;" href="[OPTOUT id='1' /]">hier</a> bequem austragen.
                           </td>
                    </tr>

                   </table>
                 [/BLOCK]




      [/ELEMENT]


    

    [TOP][/TOP]
  [BETWEEN][/BETWEEN]
  [BOTTOM][/BOTTOM]
  [CONTAINERTOOLS]<div>[CREATE /] [SORT /]</div>[/CONTAINERTOOLS]
[/CONTAINER]
</div>
</body>
</html>

Alles anzeigen

- - - Aktualisiert - - -

Den Teil ignoriert Outlook auch gekonnt....

HTML

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:18px;margin-top:-11%;font-weight:300;margin-left:450px;margin-bottom: 350px">
    <tr >
 <td style=" font-size: 12px;font-weight:300;margin-top: -18%; font-family:'Arial';">
        Telefon:<br>
 [INPUT name='Telefon-Absender' label='Telefon-Absender' type='char' required='true' default='[Telefon-Absender /]'] <br><br>


        E-Mail:<br>
 [INPUT name='EMail-Absender' label='EMail-Absender' type='char' required='true' default='[EMail-Absender /]']
 </td>


</tr>   
    [/BLOCK]


</table>

Alles anzeigen

Bandit

Dann https://wiki.selfhtml.org/wiki/Grafik/Grafiken_mit_Data-URI

Sundream

Hallo,

danke für die Antwort, aber leider hilft mir das glaube ich nicht weiter, da ich ein background-image brauche, nicht ein normales....

Danke !

- - - Aktualisiert - - -

Das Bild soll hinter dem kompletten Text liege, den ich habe.

Bandit

Wo steht geschreiben, dass du das nicht auch als Hintergrund für den Body verwenden kannst?

Sundream

Naja das Element background-image funktioniert für Outlook nicht... Wie würdest du das denn einbinden wenn es ein Hintergrundbild sein soll?

Bandit

Soweit ich weiß, kann Outlook aber dies:

Sundream

Habe es getestet...funktioniert leider nicht...

- - - Aktualisiert - - -

Jetzt wird es nichtmal mehr bei gmx angezeigt..

- - - Aktualisiert - - -

Zumindest am PC nicht.. am Handy schon

Arne Drews

Hallo,

Wenn Du MailingWork nutzt, würde ich den Support dort mal fragen.
Immerhin zahlst Du dafür.

Sundream

Hallo,

ja das habe ich schon versucht..leider ist der Support stellenweise nicht wirklich hilfreich...

Tags