Problem with email best practices: add background color to images

[Kanuea]

In one of the hubspot design course videos, they suggest adding a background color to images in emails so that there is still structure if the recipient's email client blocks images.

The problem is that when I try to do this, the background color I choose peeks out like a funny bottom border below the image in almost all email clients. The only email client that the background color behaves in is Outlook, the most likely client to block images.

Is there any work around that prevents the background color from showing when it is not needed?

[Ty]

Hi @Kanuea,

Sorry you're having trouble with your template, I tried to find the speciifc email in your portal, but didn't see it. From the sounds of it, it sounds like you may have padding set on your image. If you are using padding on an image, it will expand past the boards, take a look at this codepen I created to explain it: 

See where the pink border is on all 3 images? Padding will extend your images 'area' but not it's size. If you are using it to add space, I would sugges using margin.

For your second issue, why it won't show in outlook. From my experience in designing, and I also checked with @AngelaHicks, Outlook versions are all over the place with supporting the 'padding' style. So most likely, the version you checked doesn't even render it, which is why the color is not shown. 

Let me know if this helps you out, and if not, shoot me a PM of a link to the template you are working in and I'll be happy to take a deeper dive and look more into it!

-- Ty

[Kanuea · Accepted solution]

Thanks Ty for your response! I'm glad for the support available here.

I understand the box model so that didn't really help (have hand coded HTML/CSS since IE6). I did not add any padding or margin, I wanted to remove it. The problem was that I could not find where that extra space was coming from even with my browser's developer tools. I agree that Outlook handles padding differently, but we cannot expect everyone to use Outlook.

ISSUE FOUND.
It looks like something in the hubspot controlled code was changed between when the emails were created that affected the alignment of the image element. I took a closer look at the differences I previously posted about and one style change stood out, "vertical-align: bottom". When I temporarily add that to the image tag it fixes the spacing problem.

SOLUTION: clone/recreate all affected email templates and the problem should be solved.

Hopefully this can help someone else!

[Mahaha]

Thank you! This helped me when using the HTML block with an image. 

[Kanuea]

I do not have any inner spacing or padding on the image, nor can I find any padding, margins, or height specified when I look at the preview's source code using my browser's developer toolbar.

For illustration purposes I have added a red background to the image, this is what it looks like.

--------  EDIT  --------

I cloned the email to make a test email and the new clone doesn't have the same problem. I did not change anything other than switching out the image, but the problem is not in the new clone. I am perplexed. The code is a little different between the two, but I did not change anything.

Original email with problem: (This is the table cell that contains the image)

<td valign="top" colspan="12" width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: sans-serif; font-size: 15px; line-height: 1.5em; color: #444444; ">
  <table cellpadding="0" cellspacing="0" width="100%" style=" background-color:#ff0000;" class="">
    <tbody>
      <tr>
        <td class="widget-span widget-type-linked_image" style="text-align: left; padding: 0; font-family: sans-serif; font-size: 15px; line-height: 1.5em; color: #444444;  " data-widget-type="linked_image" valign="top">
          <div class="layout-widget-wrapper">
            <div id="hs_cos_wrapper_module_1483467207873123" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image">
              <a href="http://www.google.ca" target="_blank" id="hs-link-module_1483467207873123" style="border-width:0px;border:0px;" data-hs-link-id="0">
                <img src="https://cdn2.hubspot.net/hub/2507791/hubfs/Test/BorderTopWLogo-Generic.png?width=600&amp;name=BorderTopWLogo-Generic.png" class="hs-image-widget " style="max-height:100px; max-width:600px; border-width:0px;border:0px;" width="600" alt="BorderTopWLogo.png" title="BorderTopWLogo.png">
              </a>
            </div>
          </div><!--end layout-widget-wrapper -->
        </td>
      </tr>
    </tbody>
  </table><!--end widget-table -->
</td>

Cloned email with different code and no problem:

<td align="left" valign="top" class="bodyContent" width="100%" colspan="12" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; color:#444444; font-family:sans-serif; font-size:15px; line-height:150%; text-align:left">
  <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
    <tbody>
      <tr>
        <td valign="top" colspan="12" width="100.0%" class=" column" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100.0%; text-align:left; padding:0; font-family:sans-serif; font-size:15px; line-height:1.5em; color:#444444" align="left">
          <div class="widget-span widget-type-linked_image " style="" data-widget-type="linked_image">
            <div class="layout-widget-wrapper">
              <div id="hs_cos_wrapper_module_1483467207873123" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image">
                <a href="http://www.google.ca" target="_blank" id="hs-link-module_1483467207873123" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; border-width:0px; border:0px" data-hs-link-id="0">
                  <img src="https://cdn2.hubspot.net/hub/2507791/hubfs/Test/BorderTopWLogo-Generic.png?width=600&amp;name=BorderTopWLogo-Generic.png" class="hs-image-widget " style="vertical-align:bottom; -ms-interpolation-mode:bicubic; max-height:100px; max-width:600px; border-width:0px; border:0px" width="600" alt="BorderTopWLogo-Generic.png" title="BorderTopWLogo-Generic.png">
                </a>
              </div>
            </div><!--end layout-widget-wrapper -->
          </div><!--end widget-span -->
        </td>
      </tr>
    </tbody>
  </table>
 </td>