title: Email HTML - Making a responsive background image for a table
body: <p>I've used <a href="http://backgrounds.cm" rel="nofollow">http://backgrounds.cm</a> to make a background image for my table, and I'm going through the horrid process of making an email campaign which requires writing HTML that looks like it's very, very old.</p>
  
  <p>Anyway here's my code for the table:</p>
  
  <pre><code>&lt;table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;" background="images/image.png" bgcolor="#ffffff" valign="bottom"&gt;
    &lt;!--[if gte mso 9]&gt;
    &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:576px;"&gt;
      &lt;v:fill type="tile" src="images/merrychristmas.png" color="#ffffff" /&gt;
      &lt;v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"&gt;
    &lt;![endif]--&gt;
    &lt;tr&gt;
      &lt;td class="cols-wrapper" style="padding-left:12px;padding-right:12px"&gt;
      &lt;!--[if mso]&gt;
        &lt;table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;"&gt;
        &lt;tr&gt;&lt;td width="576" style="width: 576px;" valign="top"&gt;&lt;![endif]--&gt;
          &lt;table width="576" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 576px;"&gt;
            &lt;tr&gt;
              &lt;td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:0px;padding-bottom:0px"&gt;
                &lt;div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333;margin-top:12px"&gt;Content here&lt;/div&gt;
                &lt;br&gt;
                &lt;table bgcolor="#1480ef" border="0" cellspacing="0" cellpadding="0"&gt;
                  &lt;tr&gt;
                    &lt;td class="button" height="35" style="text-align:center;font-size:16px;font-family:sans-serif;font-weight:normal;padding:0 20px 0 20px;"&gt;
                      &lt;a href="#" target="_blank" style="color:#ffffff;text-decoration:none;"&gt;Button&lt;/a&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
            &lt;/tr&gt;&lt;!-- /Content --&gt;
          &lt;/table&gt;
        &lt;!--[if mso]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;![endif]--&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;!--[if gte mso 9]&gt;
      &lt;/v:textbox&gt;
    &lt;/v:rect&gt;
    &lt;![endif]--&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The background image appears fine that I am using, but as I'm trying to create a responsive Email design, it doesn't scale properly. I have a banner near the top which scales perfectly fine, but I don't know how to make the background image scale. The image stays a fixed width at the moment, but I would like it to scale to the width of the table at all times.</p>
  
  <p>Any ideas?</p>