Responsive image backgrounds in email when viewed in Gmail on a mobile web browser

Cory Burrell · August 2018

I want to add background images (with and without overlapping content) in my emails. I've managed to make it work in a variety of clients (desktop gmail, the gmail mobile app, iMail, Android standard email client, etc.) but Gmail through a web browser (not an app) frequently looks poor. The image, instead of displaying through the cell, zooms in on a blurry part of the background instead.

Here's an example snippet of code:

<body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">



<p><span class="mcnPreviewText" style="display: none; font-size: 0px; line-height: 0px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; visibility: hidden; mso-hide: all;">PREVIEW TEXT</span></p>



<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" id="bodyTable" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; height: 100%; margin: 0; padding: 0; width: 100%;" width="100%">

<tbody>

<tr>

<td id="bodyCell" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; height: 100%; margin: 0; padding: 0; width: 100%;" align="center" valign="top">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" width="100%">

<tbody>

<tr>

<td id="templateHeader" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #1f7722; background-image: url('https://gallery.mailchimp.com/c5ff9bcd4829bb9ee423eecd0/images/1f95f775-5eba-4856-8296-1462ee03928d.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; border-top: 0; border-bottom: 0; padding-top: 46px; padding-bottom: 46px;" align="center" valign="top" data-template-container=""><span style="font-size: 36pt;"></span>

The closest I've had to any success is changing the background position value, but it is highly dependent on the picture, requires a lot of testing, and sometimes still doesn't work. I'd love to find a way to have the background image display at least somewhat similarly to how it does on other clients.

Would appreciate any advice anyone has!

Responsive image backgrounds in email when viewed in Gmail on a mobile web browser

Categories