title: Office 365 email background image/gradient or VML tile/gradient
body: <p>EmailOnAcid code analysis for Office 365 says there is no support for background images, in either the shorthand (<code>background: url("foo.png");</code>) or explicit (<code>background-image: url("foo.png");</code>) format, and no support for the background attribute on <code>TD</code> elements either. In addition to these styles, I have VML code targeted to <code>[if gte mso 9]</code>. </p>
  
  <p>In some of my tests, I see my background image, but not when I switched from an image/VML tile to a linear gradient/VML gradient. Is this an issue of Office 365 adding image support of some kind recently, or is it that VML gradients are unsupported in Office 365?</p>
  
  <p><strong>Email code with image:</strong> (note: shown here with <code>cid</code> references for attached image; test results were mostly using an image hosted on imgr.com)</p>
  
  <pre><code>&lt;head&gt;
    &lt;style&gt;
      table.with-bg {
        width: 570px;
        min-height: 717px;
      }
  
      table.with-bg td.image-container {
        padding: 10px;
        background: url("cid:mailing_footer") repeat-x;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body link="#497cbe" vlink="#497cbe" alink="#497cbe"&gt;
    &lt;table class="with-bg" cellpadding="10" cellspacing="0" border="0" width="570" height="717"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="image-container" background="cid:mailing_footer" bgcolor="transparent" valign="top" width="570" height="717"&gt;
            &lt;!--[if gte mso 9]&gt;
            &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:570px;height:717px;"&gt;
              &lt;v:fill type="tile" src="cid:mailing_footer" color="#ffffff" /&gt;
              &lt;v:textbox inset="0,0,0,0"&gt;
            &lt;![endif]--&gt;
            &lt;div&gt;
              &lt;table cellpadding="0" cellspacing="0" border="0" width="570" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"&gt;
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
                    &lt;td&gt;
                      &lt;table cellpadding="0" cellspacing="0" border="0" width="550"&gt;
                        &lt;tbody&gt;
                          &lt;tr&gt;
                            &lt;td colspan="2" align="left" bgcolor="transparent"&gt;
                              &amp;nbsp; 
                            &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                          &lt;td colspan="2" align="center" bgcolor="transparent"&gt;&lt;img id="headerpic" src="cid:mailing_header" width="468" height="71" alt=" " title=" " style="width:468px; height: 71px;"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt; 
                            &lt;td colspan="2" class="body" style="min-height:200px;"&gt;
                              CONTENT GOES HERE
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/tbody&gt;
                      &lt;/table&gt;
                    &lt;/td&gt;
                    &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
            &lt;!--[if gte mso 9]&gt;
              &lt;/v:textbox&gt;
            &lt;/v:rect&gt;
            &lt;![endif]--&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Changed for gradient:</strong></p>
  
  <pre><code>&lt;head&gt;
    &lt;style&gt;
      ...
  
      table.with-bg td.image-container {
        padding: 10px;
        background-color: white;
        background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff);
        background-image: -moz-linear-gradient(left, #b6cae8, #ffffff);
        background-image: -o-linear-gradient(left, #b6cae8, #ffffff);  
        background-image: linear-gradient(#b6cae8, white);
        background: linear-gradient(#b6cae8, white);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body link="#497cbe" vlink="#497cbe" alink="#497cbe"&gt;
      ...
          &lt;td class="image-container" background="linear-gradient(#b6cae8, white);" bgcolor="transparent" valign="top" width="570" style="background-color: white; background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff); background-image: -moz-linear-gradient(left, #b6cae8, #ffffff); background-image: -o-linear-gradient(left, #b6cae8, #ffffff);  background-image: linear-gradient(#b6cae8, white); background: linear-gradient(#b6cae8, white);"&gt;
            &lt;!--[if gte mso 9]&gt;
            &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:570px;"&gt;
              &lt;v:fill type="gradient" color="#ffffff" color2="#b6cae8" /&gt;
              &lt;v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"&gt;
            &lt;![endif]--&gt;
      ...
  &lt;/body&gt;
  </code></pre>