Android gmail can't scale background image correctly

Question

<html>
  <head>
  </head>
  <body>
  <td>
    <table align="center" background="{{imgUrl}}" height="461" width="597">
      <tr>
        <td width="597" height="461">&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

See code above. On android, the image is not scaled correctly. See image attached. Is there anyone who know how to fix it? Thanks!

score 3 · Accepted Answer · answered Dec 05 '17 at 23:08

3

It is caused by gmail auto-sizing and could be fixed by applying min-width -- style="min-width:597px;"

Ideas from - https://www.campaignmonitor.com/forums/topic/7733/android-gmail-image-resizing-issues/

answered Dec 05 '17 at 23:08

Haoyu Chen

1,760
1
22
32

1

https://www.campaignmonitor.com/css/color-background/background-image/ - FYI - background images do not work at all in Outlook or some versions of Android. – gwally Dec 05 '17 at 23:41
@gwallyThanks for the heads-up! For now we don't have plan to deal with outlook support~ – Haoyu Chen Dec 06 '17 at 01:45
1

@HaoyuChen try [Bulletproof Backgrounds](http://backgrounds.cm) works on a LOT of clients. – scoopzilla Dec 06 '17 at 20:48

score 0 · Answer 2 · answered Dec 06 '17 at 03:20

You are giving the table a width & height same as the td inside it. You should be able to use media queries to control the table height.

Try this code:

<html>
  <head>
    <style type="text/css">
     @media only screen and (max-width:480px) {
     .bannerTable{width:100% !important;height:auto !important;}
     }
    </style>
  </head>
  <body>
  <td>
    <table align="center" background="{{imgUrl}}" width="597" style="width:100%; max-width:597px; height:461px;display:block;" class="bannerTable">
      <tr>
        <td>Content goes here</td>
      </tr>
    </table>
  </body>
</html>

Hope this works for you

Android gmail can't scale background image correctly

2 Answers2