0

I have ae email in which I have a cell with a background image. I need to change this image src for mobiles. Is it possible to do this ? I see a lot of examples using the <img> tag but in my case this is a background image.

I have decided to cut the background image in Outlook (bulletproof bg wasn't enough) so basically my code looks like this

<!--[if lt mso 9]> <!-->
<td
    background="https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet.png" bgcolor="#ffffff"
    valign="top" align="center"
    style="background-repeat: no-repeat;"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>
<!--<![endif]-->

<!--[if gte mso 9]>
 <td
    valign="top" align="center"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>

Instead I'd like to use this image on mobile. How can I do this ? (I can choose to duplicate the code and add some visibility classes, but if my emails are too long Gmail will choose to cut the visible part so I'd like to avoid such drastic measures)

Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164

1 Answers1

0

You will need to target that specific class that contains the image and change it on mobile. 

@media only screen and (max-width:480px) {
.red-carpet-bulletproof-background{background-image:url();width:300px; height:225px; background-size:100% auto;}
}

Here is a working example:

 @media only screen and (max-width:480px) {
 .table{width:300px !important;}
    .red-carpet-bulletproof-background{background-image:url('https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet-mobile.png') !important;width:300px; height:225px; background-size:100% auto;}
    }
<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td
    background="https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet.png" bgcolor="#ffffff"
    valign="top" align="center"
    style="background-repeat: no-repeat;"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod. Quisque aliquam lectus nec justo tincidunt iaculis. Pellentesque ultrices suscipit diam, a dapibus nulla. Aenean semper est at dapibus lacinia. Etiam semper lacinia dictum. Donec non fermentum eros. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
</td>
</tr>
</table>

Let me know if this works for you.

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • I actually ended up totally removing the `background` in the code. I thought I had to keep it but since I'm not showing the bg on Outlook, almost every other client supports td background via class (I thought it would be more tricky for email clients, but apparently most handle this correctly). The media query isn't supported by many email clients though, but the fallback to the default version is enough for me. – Cyril Duchon-Doris Feb 19 '18 at 13:01
  • Even though VML is tricky it does give a more visual appeal to emails. At the end of the day its your call as to what you want to support and do. Happy i could help :-) – Syfer Feb 19 '18 at 22:51