EB
3
Using retina images as background images?
My developer tells me that I cannot use retina (2x) images as a background image because the width property cannot be set. I find this strange so wanted to find out how other people might be handling this issue. Here is my code in the first table cell:
<td background="header_img.jpg" bgcolor="#511843" valign="top" height="337" class="bg-m">
Would love to some help !
Thanks
You can use retina backgrounds to some extent, this is what I use
background:url(img-x2.jpg) center/cover;background-image:url(img-x2.jpg);background-size:100%;background-size:cover;"The reason it's set twice is Gmail will strip
background-sizebut it's happy to have it in shorthand. Android 4.x doesn't like shorthandbackgroundso you have to write it all out in longhand. And I've set thebackground -sizetwice ascovertends to do a better job but100%has better supportBut if you have a background set in VML or as an HTML attribute (
background="img-x1.jpg") you have to use regular sized non-retina images.Hope that helps.
Cheers,
Mark
You can use retina images in VML markup. You just have to set your fill type to frame. What ever image you're using as your fill will stretch to the dimensions of your rectangle.
<v:fill type="frame" src="image2x.jpg" />It's been 2 years but I just wanted to mention for anyone looking at this post that background-size is no longer stripped in Gmail. At least not in Gmail on the web which is what I assume Mark was referencing 2 years ago.
Mark, do you know if specifying a @1x image in the background attribute + the @2x image in the background style results in clients downloading both images? Any data / research on that you're aware of? Thanks!
Hi Mark,
Yeah it should only ever download one image.
Depends on your audience.
Retina images tend to be heavy, so be weary if a large majority of your audience views your emails via mobile. I for one wouldn't be happy if I found out some vendor was sending me huge images in the background of their emails.
a google search found this tool from campaign monitor: https://backgrounds.cm/
As Mark said, using
background-size:coveris the way to go. But that topic also reminded me there is animage-set()function in CSS (see spec) that is well supported in WebKit and Blink. So you could write the following :I've just tested this and this works well in Gmail (on desktop or on its mobile apps, even the Inbox clients), AOL (desktop webmail), Apple Mail. It's not supported by Yahoo or Outlook.com, but they'll default to the
backgroundattribute instead.Thanks Remi. Does this work in the Android gmail app? In my Litmus tests the image is blocked, which I thought was a client specific thing that couldn't be overcome.
I just tested on a Galaxy S4 mini in the default email app on Android 4.4.4, and
-webkit-image-setdoesn't seem supported, so the default background image appears instead.Mark, Remi thanks for the reply. Indeed Mark your code has worked (with a small tweak that we made) , here's how its looking
style="background:url(image.jpg) center/cover;background-image:url(image.jpg);background-size:100%;background-size:cover; background-position: center center" bgcolor="#511843" valign="top" height="337" class="bg-m">Still not quite nailing every email client, but works for most so thanks so much!