Background Image

Hassle-free, bulletproof, responsive background images - even in Outlook.

The {background} Helper provides consistent, reliable background images in modern email clients including all versions of Outlook (through VML). Inkcite’s implementation, which is based on Campaign Monitor’s Bulletproof Background Images, makes it easy to customize its appearance (such as font family, size, weight and alignment) plus support for mobile-only overrides.

Usage

Example Inkcite markup:

 {background src=YJOX1PC.png bgcolor=#7bceeb height=92 width=120}
   ...
 {/background}

An example of the resulting email HTML output:

 
<table bgcolor=#7bceeb border=0 cellpadding=0 cellspacing=0 style="background:#7bceeb url(images/YJOX1PC.png);width:120px" width=120>
  <tr>
    <td><!--[if mso]><v:rect fill="t" stroke="f" style="height:92px;width:120px" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill color="#7bceeb" src="images/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0"><![endif]-->
      <div>
        <table border=0 cellpadding=0 cellspacing=0 width=100%>
          <tr>
            <td height=92 style="height:92px">
              ...
            </td>
          </tr>
        </table>
      </div>
      <!--[if mso]></v:textbox></v:rect><![endif]--></td>
  </tr>
</table>

Inkcite’s markup is 84% shorter than conventional HTML.

Attributes

Attributes in bold are required.

align: Specifies the alignment of the text within this element. Set alignment to justify to enable justified text within this element.
background-gradient: Optional hex color that, when present, enables a background gradient from the element’s background color to this color.
background-gradient-position: When background-gradient is present, allows you to control the position of the gradient.
background-gradient-shape: Controls the shape of the background gradient - either liner or radial.
background-position: Controls how the background aligns in the element for clients that support CSS backgrounds. Since Outlook doesn’t support background placement, it is recommended that you use outlook-src and specify a background image that covers the entire area just for those clients.
bgcolor: The background color to display by default if images are disabled or background images aren’t supported.
border: Optional border to display around this background. Supports directional borders (e.g. border-left).
border-radius: When a border is defined, controls the border radius in pixels.
color: Specifies the color of the text on or inside this element. Colors specified in CSS shorthard (e.g. #345) will automatically expand to the full declaration (e.g. #334455) to maximize compatibility.
duotone: When present creates a duotone image. Specify the gradient of dark to light in the format of #light-#dark, e.g. #C2D6D9-#44607f
font: Specifies the named font style corresponding to one or more values set in the helpers.tsv file describing the font.
font-family: Specifies one or more font familes for this element in the order they will be used per CSS standards.
font-size: Specifies the size of the font in pixels for text on or inside of this element.
font-weight: Specifies the font weight for this element’s text either as a weight (e.g. 400) or simply as bold. Overrides the font weight attribute of the named font style if it is applied to this element.
height: The height of the background image. When omitted the background area will expand based on the contents within.
letter-spacing: Specifies the spacing in pixels between the letters on this element. Overrides the letter spacing if a named font style is applied to this element.
line-height: Specifies the line height in pixels by default, or if units are provided (e.g. 1.5em) they will be converted to pixels to maximize compatibility. Overrides the line height of the named font style if it is applied to this element.
mobile: Declares the behavior of this background element on mobile devices will typically be fill.
mobile-background: Specifies an alternate background image to display on mobile devices.
mobile-background-position: Controls how the background fits within the element on mobile devices - e.g. bottom.
mobile-background-repeat: Specifies the background repeat behavior on mobile devices. By default, if a background-position is specified, the image does not repeat. Override this behavior with this attribute.
mobile-background-size: Specifies the size attribute of this background image on mobile devices - e.g. fill or cover
mobile-bgcolor: Overrides the normal background color on mobile devices.
mobile-padding: Specifies the padding on this element (in pixels) when it displays on mobile devices.
mobile-width: Optional override for the width of this element on mobile devices.
outlook-src: Specify an alternate background image for Outlook email clients that support VML (e.g. Outlook 2007-2016). Those Outlook clients will display this image instead of the one specified in the src attribute.
padding: Specifies the padding (in pixels) between the edges of the background image and the content within.
shadow: Enables text shadowing in the specified hex color. By default the shadow is offset directly below the text by one pixel.
shadow-blur: When shadow is enabled, overrides the CSS blur default value in pixels.
shadow-offset: When shadow is enabled, overrides the vertical CSS shadow offset, set in pixels.
src: The name of the image (in your project’s images/ directory) to display in the background.
valign: Specify the vertical alignment of the content within the background image - e.g. middle. Useful only if you’ve specified a height that is larger than the content contained within the background.
width: The width of the background image. When omitted or if fill or 100% are provided, will fill the available horizontal space.

Project Config

Set the default values for all {Background Image} Helpers by setting these attributes in helpers.tsv:

vml

Disable Outlook compatibility on this and other Helpers by setting vml to false your projects config.yml file.

outlook-text-shadows

When set to true enables verbose MSO-specific styles enabling text shadows in certain versions of Microsoft Outlook (e.g. 2007-2016) whenever shadow is applied to an element.

Credit

Bulletproof background image support courtesy of @stigm via Campaign Monitor

Documentation