Do you hate background images in emails? Oh, I do!

Asking an email developer to add background images in email newsletters is like asking someone to jump a flying plane without a parachute. Well, not quite like that but, sorry, I couldn't find anything as terrible to say! It's terrifying! 

OK, no more kidding now, adding images as background in email newsletters is a pain in the back.

I've been trying to add on the table and sometimes it works but for so many times it doesn't even work using tools like https://backgrounds.cm/.

It's an annoying and frustrating experience.

However, I came across  a way to do it that usually works very well - I add the background to the TDs instead of the table - see the method #2. It depends on the case of course but if you can add on the TD then this could save you time and your hair left.

Method 1 of doing it:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
     <td background="somebackground-image.jpg" bgcolor="#000000" width="600" height="358" valign="top" style="text-align: right; background-position: right bottom !important; background-size: cover !important;">
        <!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:358px; background-position: right bottom !important;">
           <v:fill type="frame" src="somebackground-image.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
              <![endif]-->
              <div>
                 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                       <td valign="left" style="text-align: left; padding:20px; font-family: Arial, Helvetica,sans-serif; font-size: 34px; mso-height-rule: exactly; line-height: 42px; color: #ffffff;">
                          <strong>Just another awesome message!</strong>
                       </td>
                    </tr>
                 </table>
              </div>
              <!--[if gte mso 9]>
           </v:textbox>
        </v:rect>
        <![endif]-->
     </td>
  </tr>
</table>

Method 2, a simplified version of 1:

<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;max-width:598px; border:none !important" width="100%" cellspacing="0" cellpadding="0" border="0">
   <tr>
      <td width="50%" style="background-image: url('somebackground-image.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover;">
         <a href="#" target="_blank">
         <img src="somebackground-image.jpg" alt="" style="display: block; border:0; width: 100%; height: auto;" width="299"></a>
      </td>
      <td width="50%" style="background-image: url(''); background-repeat: no-repeat; background-position: top center; background-size: cover;">
         <a href="#" target="_blank">
         <img src="somebackground-image.jpg" alt="" style="display: block; border:0; width: 100%; height: auto;" width="299"></a>
</td> </tr> </table>

Notice the

background-size: cover

property. You might get completely different results if you are not using it.

Of course, you can try other ways but this works the best for me so far. Give it a try and let me know in the comments.

Happy email coding! Your friend, the email snob.