CODEWITHSUNDEEP
htmlcssemailbackground-imagehtml-email
germainelol
germainelol

Reputation: 3331

Email HTML - Making a responsive background image for a table

I've used http://backgrounds.cm 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.

Anyway here's my code for the table:

<table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;" background="images/image.png" bgcolor="#ffffff" valign="bottom">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:576px;">
    <v:fill type="tile" src="images/merrychristmas.png" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <tr>
    <td class="cols-wrapper" style="padding-left:12px;padding-right:12px">
    <!--[if mso]>
      <table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
      <tr><td width="576" style="width: 576px;" valign="top"><![endif]-->
        <table width="576" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 576px;">
          <tr>
            <td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:0px;padding-bottom:0px">
              <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">Content here</div>
              <br>
              <table bgcolor="#1480ef" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="button" height="35" style="text-align:center;font-size:16px;font-family:sans-serif;font-weight:normal;padding:0 20px 0 20px;">
                    <a href="#" target="_blank" style="color:#ffffff;text-decoration:none;">Button</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr><!-- /Content -->
        </table>
      <!--[if mso]></td></tr></table><![endif]-->
    </td>
  </tr>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</table>

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.

Any ideas?

Upvotes: 2

Views: 6770

Answers (1)

user2958788
user2958788

Reputation:

You could try setting background-size:contain; on the element you have the image on. You will only see it work on smaller screens to begin with such as tablets and smartphones, which at a guess would have support. Css support seems far better on mobile than on desktop versions of clients...

Upvotes: 1

Related Questions