Background Images

What is it?

For those times when you need to overlay content on images to work with your design, you'll require the use of background images. Background images can be troublesome rendering in certain email clients that do not support the CSS background property. Thankfully there is a solution.

Background image CSS

Below is a content block from the boilerplate. Within this we have placed a single background image. This is made up of a <table>, <tr> and <td>. The <td> is the element that the background image is applied to for email clients that support it. For ease we inline the styles on the background image. Within the style property is where you should specify the source of your image; doing so twice on background and background-image. You'll also need to set the width and height of the <td>.

Background image fallback

Next we need to create the background fallback for those versions of Outlook that do not support background images natively. To do this we use Microsofts vector markup language, which you can learn more about here.

All you need to worry about changing here is:

  • The v:rect width and height attributes; these should match the td dimensions already set
  • The v:fill src attribute; define the image source

Within the fallback code is where you add your content that will overlay the background image. In here place your overlay content, such as the <h2> element in the example below.


<!-- Background Image Start -->
  <table align="center" cellpadding="0" cellspacing="0" border="0">
      <tr>
          <td width="600" height="250" style="background:url('http://cogentro.com/background-img.jpg'); background-image:url('http://cogentro.com/background-img.jpg');background-repeat:no-repeat;background-size:cover; background-position: center center;" align="center" valign="middle">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:250px;">
          <v:fill type="frame" src="http://cogentro.com/background-img.jpg" color="#ffffff" />
          <v:textbox inset="0px,0px,0px,0px" style="v-text-anchor:middle-center">
          <![endif]-->
          <div>
            <!--[if mso]>
            <table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="750">
                <tr>
                    <td width="750" valign="middle">
            <![endif]-->
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td style="text-align: center; padding: 20px;" valign="middle">
                            <h2>Heading on top of Background Image</h2>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!--[if mso]>
                    </td>
                </tr>
            </table>
            <![endif]-->
            </div>
          <!--[if gte mso 9]>
          </v:textbox>
          </v:rect>
          <![endif]-->
          </td>
      </tr>
  </table>
<!-- Background Image End -->