Retina Background Images Not Scaling to Fit
Hi email geniuses,
I really need some help - I'm trying to add a retina (2x) background image to an email.
The image file itself is 1200x600, and I'm trying to display it as 600x300.
<td width="600" height="300" align="center" style="background: url('image_1200x600.jpg') no-repeat center; background-size: 600px 300px; width: 600px !important; height: 300px !important;"> (content) </td>
The problem I'm running into is that it displays as intended my browser preview (scaled to 600x300 as intended), but when rendered in many email clients, it doesn't scale to fit the space. Outlook shows the top left 600x300, while Android, Gmail, and Yahoo show the center 600x300 - in both cases, only 1/4 of the image.
Any suggestions? I've read hundreds of resources on retina images and background images, but never the two combined for HTML email.