0

I am trying to send a background image in email. I am using HTML email template without Letterhead. On Preview, I can see the background image but it is not displayed when send to email server. I have tested with GMAIL and outlook.

HTML email template

<html>
<head>
<body style="position: relative";>

  <div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
  </v:background>
  <![endif]-->
  <table height="20%" width="20%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png">
      </td>
    </tr>
  </table>
 </div>

  <table height="40%" width="40%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        testing background image
    </tr>
   </table>

</body>
</head>
</html>

On Preview:

enter image description here

But In GMAIL/OUTLOOK, I am only seeing testing background image

  • Check if you have to enable download pictures in Gmail/ Outlook – highfive Aug 21 '18 at 8:19
0

You may use something like that, please change the width and height values based on your expectations:

<html>
<head>
<body style="position: relative";>

   <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                <td bgcolor="#7bceeb" background="https://i.imgur.com/YJOX1PC.png" width="100%" height="400" align="center" valign="top"><!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:600px;">
                <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#bdd731" />
                <v:textbox inset="0,0,0,0">
             <![endif]-->

                  <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                      <td width="100%" align="left"><table cellpadding="0" cellspacing="0" border="0">

                          <tr>
                            <td >testing background image</td>
                          </tr>

                        </table></td>
                    </tr>
                  </table>

                  <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]--></td>
              </tr>
            </table>

</body>
</head>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.