Background Images

Using background images can cause a few issues, this is because some email clients, such as Outlook, struggle to render them properly. The reason being that some email clients do not understand or 'respect' some CSS declarations.

However, it is possible to insert extra VML code into your HTML so that your selected background image can render properly.

On this page:

amf:background

By using amf:background on the relevant tag, you can force the required VML code to be added to your HTML. The amf:background attribute can be applied to any tag where it logically makes sense; however, for it to work, the HTML tag must also provide other information:

  • Background image
  • Width
  • Height(optional)
  • Background colour(optional)

Background Image

The background image must be specified on the tag which contains the amf:background attribute. It can be specified in different ways, which adhere to their priority. When two or more values are specified the value with the highest priority will be used. This priority is as shown below:

  • -amf-outlook-background-image: This CSS property specifies the url of the image to use as the background. E.g:

  • Copy 
    <td bgcolor="#ffffff" valign="top" style="-amf-outlook-background-image: http://example.com/some_image.jpg; border-collapse: collapse; background-position: center;" align="center" amf:background>
  • background-image property
  • background CSS property
  • background HTML attribute

Width

The width must also be specified on the tag that has the amf:background attribute. As with the background image information above, there are different ways to specify it which have a priority order.

  • -amf-outlook-background-size property: first value is width, second height. Both values are required when using this property and they can be dash, comma or space separated. E.g:

    Copy 
    -amf-outlook-background-size: 100,200;

    or

    Copy 
    -amf-outlook-background-size: 100-200;

    or

    Copy 
    -amf-outlook-background-size: 100 200;

  • width HTML attribute: same as width property.

    Note: The width property can also be given '%' or 'px'. However 'em', though valid in CSS, raises an exception for Outlook-specific code

Full Email Width

A background image that spans the full width of an email is the one case where width does not need to be specified on the tag with amf:background.

It only works if:

  • HTML tag with amf:background is a <td>
  • Width is specified on the enclosing table as CSS property or HTML attribute
  • Width specifed as a percentage (%)

Note: Anything else will raise an exception when the width is not on the html tag with the amf:background attribute.

Height

A height specification is optional, but can be used as part of the -amf-outlook-background-size, a CSS property or with the HTML attribute.

Background Colour

Also optional, the background colour can be specified by the CSS background-color property, bgcolor HTML attribute. If no colour is specified the default is white (#ffffff)

Example Use

Inputting this:

Copy 
<html>
<head>
</head>
<body>
    <table>
        <tr>
            <td width="600" height="600" background="http://example.examplesite.com/files/amf_docs/project_56/OldCanvas-5.jpg" amf:background>Welcome Back</td>
        </tr>
    </table>
</body>
</html>

...will generate this:

Copy 
<html>
<head>
</head>
<body>
    <table>
        <tr>
            <td width="600" height="600" background="https://app.adestra.com/Docs/proxy/image?image=http%3A%2F%2Fexample.examplesite.com%2Ffiles%2Famf_docs%2Fproject_56%2FOldCanvas-5.jpg" amf:background="amf:background">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:600px;">
            <v:fill type="tile" src="http://example.examplesite.com/files/amf_docs/project_56/OldCanvas-5.jpg" color="#ffffff" />
            <v:textbox inset="0,0,0,0">
            <![endif]-->
            <div>
Welcome Back
            </div>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:rect>
            <![endif]-->
            </td>
        </tr>
    </table>
<img src="https://app.adestra.com/Docs/proxy/image?image=http%3A%2F%2Fdocs.example.com%2Ft%2F18ZaS3Os5.png" alt="">

</body>
</html>

Integration with CSS Inlining

The CSS Inliner runs before the background images; this provides a few possibilities as to where various options can be defined.