Frank: Hintergrundbild skalieren

Hallo, ich muss in der Arbeit einen E-Mail Newsletter erstellen. Da ich ein absoluter Neuling im Bereich HTML-Programmierung bin, hat man mir das kostenlose Programm Supermailer empfohlen (angeblich sehr Benutzerfreundlich).

Nach einiger Recherche und ein bisschen Ausprobieren hab ich es schon hinbekommen, dass sich das Hintergrundbild nicht ständig wiederholt ("background-repeat: no-repeat;"). Jetzt muss ich es also nur noch auf die richtige Göße bringen.

Habe es schon mit "background-size: 100% 100%", "background-size: cover" und " background-size: contain" versucht oder vielleicht auch nur an die falsche Stelle geschrieben.

Kann mir da jemand weiterhelfen?

  1. hast du mal die ganzen Beispiele die im Internet kursieren ausprobiert? Zeig doch mal deinen Code.

    1. Ich habe ein paar ausprobiert, ja. Aber wie gesagt, bin ein absoluter Neuling.

      Hier der Code:

      <HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <META name=Generator content=10.25>
      
      <META name=viewport content="width=device-width, initial-scale=1">
      <META name=format-detection content=telephone=no><title></title></HEAD>
      <BODY 
      style="BACKGROUND-IMAGE: url('Hintergrund.PNG'); BACKGROUND-COLOR: #ffffff, BACKGROUND-REPEAT: no-repeat;" 
      bgColor=#ffffff 
      background="file:/Hintergrund.PNG">
      <P align=left><FONT size=3 face=Arial>&nbsp;&nbsp;</FONT></P></BODY></HTML> 
      
      1. Hallo Frank,

        <HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <META name=Generator content=10.25>
        
        <META name=viewport content="width=device-width, initial-scale=1">
        <META name=format-detection content=telephone=no><title></title></HEAD>
        <BODY 
        style="BACKGROUND-IMAGE: url('Hintergrund.PNG'); BACKGROUND-COLOR: #ffffff, BACKGROUND-REPEAT: no-repeat;" 
        bgColor=#ffffff 
        background="file:/Hintergrund.PNG">
        <P align=left><FONT size=3 face=Arial>&nbsp;&nbsp;</FONT></P></BODY></HTML> 
        

        Guckst du:

        • Grundgerüst
        • format-detection
        • meta generator ist sinnfrei
        • der Inhalt des Style-Attributs ist nach „no-repeat;"“ beendet
        • bgColor ist kein gültiges CSS
        • align und font sind missbilligt

        Erstelle zuerst ausschließlich den Inhalt, bevor du dich um die Gestaltung kümmerst. Ob das nachher in jedem Mailclient ordentlich dargestellt wird, ist noch mal ein ganz anderes Problem.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Danke schon mal, aber bis auf den Ausdruck 'background-repeat: no-repeat' wurde alles vom Programm „Supermailer" selbst geschrieben.

          Liegt das Problem dann beim Programm?

          1. Hallo

            … bis auf den Ausdruck 'background-repeat: no-repeat' wurde alles vom Programm „Supermailer" selbst geschrieben.

            Liegt das Problem dann beim Programm?

            Das kann sein. Es kann aber auch sein, dass einzelne CSS-Eigenschaften von einzelnen oder allen Mailprogrammen nicht interpretiert werden.

            Tschö, Auge

            --
            Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
            Toller Dampf voraus von Terry Pratchett
            1. Es kann aber auch sein, dass einzelne CSS-Eigenschaften von einzelnen oder allen Mailprogrammen nicht interpretiert werden.

              Es sollte auch nur ein Informationsnewsletter über Outlook innerhalb der Firma werden.

              Kann jemand eine möglichst kostenlose Alternative für die Erstellung solcher Rundmails empfehlen?

              Nach wie vor besteht aber das Problem, dass ich die Größe des Hintergrundbildes nicht verändern kann...Was müsste ich denn wo im Code hinzufügen? (angenommen es gäbe die anderen Probleme nicht)

              1. Hallo Frank,

                Nach wie vor besteht aber das Problem, dass ich die Größe des Hintergrundbildes nicht verändern kann...Was müsste ich denn wo im Code hinzufügen? (angenommen es gäbe die anderen Probleme nicht)

                Es ist nicht unwahrscheinlich, dass eine Menge Mailclients background-size nicht verstehen.

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
              2. Hallo

                Es kann aber auch sein, dass einzelne CSS-Eigenschaften von einzelnen oder allen Mailprogrammen nicht interpretiert werden.

                Es sollte auch nur ein Informationsnewsletter über Outlook innerhalb der Firma werden.

                Das tut ja nichts zur Sache, falls Outlook die gewünschte CSS-Eigenschaft nicht interpretieren kann. Das solltest du zuallererst ermitteln, bevor du dich an eventuell nicht funktionierenden Dingen abarbeitest.

                Tschö, Auge

                --
                Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                Toller Dampf voraus von Terry Pratchett
              3. Hallo Frank

                Nach wie vor besteht aber das Problem, dass ich die Größe des Hintergrundbildes nicht verändern kann...Was müsste ich denn wo im Code hinzufügen? (angenommen es gäbe die anderen Probleme nicht)

                Hier kannst du sehen, welche CSS-Eigenschaften unterstützt werden.

                Outlook unterstützt background-image nicht.

                Mit besten Grüssen
                Richard

                1. Hallo Richard Rüfenacht,

                  Nette Seite. Kannte ich noch nicht. Wie aktuell ist denn dieses CanIUseForEmails?

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. Hallo Matthias

                    Wie aktuell ist denn dieses CanIUseForEmails?

                    Nicht besonders aktuell (Mai 2014) und Outlook 2016 ist z.B. noch nicht erfasst. Allerdings sind auch die E-Mail-Clients bezüglich CSS nicht gerade aktuell, möglicherweise hat sich da einfach auch nichts geändert.

                    Mit besten Grüssen
                    Richard