CODEWITHSUNDEEP
androidhtmlcsshtml-email
Erick Funes
Erick Funes

Reputation: 21

background Image in HTML Email not rendering correctly on Android 6.0 & 4.4

I'm currently working on an HTML email & the background Image doesn't render, its an phone with another photo inside the screen. It works with other email clients but for Android 6.0 & Gmail App IMAP Android 4.4 I just get a grey background behind the image that is suppose to be in the phone screen. Is there something missing or something android does to background in HTML or CSS

<td class="rightContainr" width="260" style="max-width: 260px; max-width: 260px;">
            <!--[if (gte mso 9)|(IE)]>
              <table width="200" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td>
            <![endif]-->
            <table class="phoneContainr" width="152" border="0" cellspacing="0" cellpadding="0" style="align:left; max-width: 152px;">
              <tr>
                <td class="phone" align="center" background="http://mailimages.texture.com/print-toGo_2016/background_day0_phone_200x360.png" style="background-image: url('http://mailimages.texture.com/print-toGo_2016/background_day0_phone_200x360.png'); background-size: 180px 324px;" bgcolor="#F2F2F2" width="152" height="312" valign="middle">
                  <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:153px;height:324px;">
                      <v:fill type="tile" src="http://mailimages.texture.com/print-toGo_2016/background_day0_phone_200x360.png" color="#F2F2F2" />
                      <v:textbox inset="0,0,0,0">
                  <![endif]-->
                  <div>
                    <table class="cover" align="center" width="140" border="0" cellspacing="0" cellpadding="0" style="align:left; max-width: 126px;">
                      <tr>
                        <td class="cover"><img class="cover" src="http://image.email.texture.com/lib/fe9a12717365047e71/m/14/featured_story_280x330.jpg" width="126px" height="auto" alt="" style="display: block; max-width: 126px;"></td>
                      </tr>
                    </table>
                  </div>
                  <!--[if gte mso 9]>
                      </v:textbox>
                    </v:rect>
                  <![endif]-->
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>

what it doeswhat it should

Upvotes: 0

Views: 1172

Answers (1)

Syfer
Syfer

Reputation: 4479

Background images on Gmail app has issues. Please read the below for more info.

Background images show up fine in the Gmail app if the email was sent to and retrieved from a Gmail email address (ie. gmail.com).

This problem will become more acute as Google has dropped the native Android mail client in favor of the Gmail mobile app for their newest operating system starting from 5.0 (Lollipop). Users on Android devices who need to access their work email would have to use the Gmail app or a 3rd party mail app.

Full article

If you do really want to go down this path, you can use use two images and control it on Gmail app using media queries. Place one image over another (only for mobile screen widths) using position and you should be good to go. Remember media queries are now supported in Gmail apps (the latest versions) and this will be possible.

Hope this answers you question.

Upvotes: 1

Related Questions