Alternatives to table background-img url for HTML emails (without the use of divs)

Question

I am trying to create the header section for a under construction HTML email. I am currently using background-img url to use the image with content overlaying it. But Outlook 2007, 2010 and 2016 does not support background-images on tables. I have found this workaround through the use of divs. However, div's are not as consistent as tables (for emails) so I want to avoid the use of div's.

Is there a way to achieve this strictly though table structure?

Current approach:

<table border="0" cellpadding="0" cellspacing="0" style="max-width:692px; background-image: url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/header-image.png);" width="692" height="400">
  <tbody>
    <tr>
      <td valign="top" align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px;">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="LOGO" src="#" style="display:block;border:0px;
                 font-family:Helvetica,Arial,sans-serif;color:#ffffff">
                </a>
              </td>
              <!-- SOCIAL ICONS -->
              <td style="text-align: right;">
                <!--YouTube -->
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/youtube-icon.png"></a>
                <!--Twitter -->
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/twitter-icon.png"></a>
                <!--LinkedIn -->
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/linkedin-icon.png"></a>
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/facebook-icon.png"></a>
              </td>
            </tr>
            <!----------------->
            <!-- HEADER TEXT -->
            <!----------------->
            <tr>
              <td colspan="2" style="padding-top:40px;">
                <!-- PADDING-->
              </td>
            </tr>
            <tr>
              <td colspan="2" style="height: 100px; color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px; padding-bottom: 10px; text-transform: uppercase;">
                TEXT<br> HERE

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

gwally · Answer 1 · 2018-01-24T18:15:09.527

If you want a background image to work in Outlook 2007-2016, there is only one way it will work and that is to use Vector Markup Language (VML). It doesn't really use divs, it uses xml. The div is the wrapper.

I made a Fiddle so you can see this code in action: https://jsfiddle.net/wallyglenn/7zLaLrfx/

This is the code:

<div style="background-color:#ff0000; width:600px;">
  <!--[if (gte mso 9)|(IE)]><!-- -->
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
  </v:background>
  <![endif]-->
  <table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
        <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
        Background Image with Text on Top
      </h1>
    </td>
  </tr>
  </table>
</div>

What you are doing is inserting a piece of xml that directs Outlook to include a background image. Outlook will ignore your background="" but display the rest of the table.

This works reliably and sadly, there really is no alternative.

The original code was taken from https://backgrounds.cm with modifications.

Good luck.

score 0 · Answer 2 · answered Jan 25 '18 at 00:40

This is what you might be looking for. I have been eliminating divs from my code as much as possible unless i am coding hybrid. Below is a code i have customized from the link you mentioned in your post.

Your content will be the 3 tables inside the VML code. Be sure to change the width and height of the VML to make it work. Just a note as i forget at times but pick it up during testing.

@media only screen and (max-width:480px) {
.hidden{display:none !important;}
.backgroundCover{background-size: cover; background-position:center center !important;}
}

<table style="max-width: 600px;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="backgroundCover" style="background: url('https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg'); background-image: url('https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg'); background-repeat: no-repeat;">
<!-- [if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:338px;">
<v:fill type="frame" src="https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg" color="#463783" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table class="hidden" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="height: 70px; line-height: 0px; font-size: 0px;" height="120"></td>
</tr>
</tbody>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 30px; text-align: center; color: #ffffff; font-weight: bold; padding: 50px 10px 0px 10px;">Beautiful background in email</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 20px; text-align: center; color: #ffffff; font-weight: normal; padding: 0px 0px 50px 0px;">no more crazy nights</td>
</tr>
</tbody>
</table>
<table class="hidden" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="height: 70px; line-height: 0px; font-size: 0px;" height="120"></td>
</tr>
</tbody>
</table>
<!-- [if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>

What was done above:

Created outer table with 3 background images placed in td. This means that every combination of the background for web is available.
Inside the above table VML is added. Things to change on VML: Image path, image dimensions (height & width) and fall back color.
Inside the VML comes all the HTML that is needed to style the block which will go above the background image.
There are two extra tables added which is being used a space both the class of hidden. If media queries are read by the email client it will hide those tables.

I had written a blog post about this which can be found here: #SyferDoesEmail.

Let me know if it works for you.

score -1 · Answer 3 · answered Jan 24 '18 at 14:54

-1

Try to use 'background' property instead 'background-image':

background: url('image.jpg') no-repeat cover;

answered Jan 24 '18 at 14:54

Alexander Z

630
3
22

Still the same issue, not supported by Outlook. – Freddy Jan 24 '18 at 14:59
So, look for this answer, it has some useful improves https://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook – Alexander Z Jan 24 '18 at 15:02
Yeah, I've seen that. As mentioned, I'd like to do it without the use of div's – Freddy Jan 24 '18 at 15:10

Alternatives to table background-img url for HTML emails (without the use of divs)

3 Answers3