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 !
You can use retina backgrounds to some extent, this is what I use
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 shorthand
backgroundso you have to write it all out in longhand. And I've set the
background -sizetwice as
covertends to do a better job but
100%has better support
But 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.
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!
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 an
image-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
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!
Hi, does anyone know if it's possible to use background position or size in VML language?
This will help you out.
Here are the important bits. But see the link for the full explanation.
In VML, keyword values contain and cover of background-size can be replicated via the aspect attribute of the
aspect="atleast"(equivalent to background-size:cover)
aspect="atmost"(equivalent to background-size:contain)
In VML, background-position can be replicated using the origin attribute and the position attribute. Both attributes require two coordinates (x and y), separated by a space or a comma. Each coordinate is a fraction value relative to the width and height (between 0 and 1) of the image for the origin attribute, and of the VML shape for the position attribute. The coordinates move from the top left of the VML shape for the position attribute, while they move from the center of the image for the origin attribute.
Yes, but you don't really do it as a background image, you can load it as an image and use your
position:absoluteand position it accordingly with
topcss properties on the image element. Then you can overlay a table to include text overlay or add and position additional images—such as a logo—that need to be overtop the background image. You want to make sure you exclude any regular images from outlook and include them as additional VML image elements otherwise Windows10 Mail won't render the images.
So basically save out your image at 50% quality and double the dimensions and then you can use cover for css friendly clients and use absolute dimensions to scale it correctly in Outlook and Windows10 Mail.
Here's an example of the code I've been using for a while and It has fairly robust support across clients.
and here's the applicable css