Gmail removes background-size in my newsletter

Asked 5/12, 2013 at 13:3 Answered 9/2, 2016 at 19:21

I have an email newsletter, that contains product pictures of the products, which are promoted via newsletter. I use full size pictures and resize them with:

<table cellspacing="0" cellpadding="0" border="0" style="width: 201px; height: 240px; background-image: url({{ item1.picture }}); background-repeat: no-repeat; background-size: 100% auto;">

Gmail strips the

background-size: 100% auto;

tag and the pictures are shown in their full size. Is there any way how to fix this? I don't want to resize each picture on the server side.

Billyebilobate answered 5/12, 2013 at 13:3 Comment(4)

what doctype you are using – Venita 5/12, 2013 at 13:18

You could try the setting the image as the background of the table rather than using the style attribute as described in #8016015 – Trivandrum 5/12, 2013 at 13:23

@Anon: None. Maybe it's stupid question, but is it really that important? – Billyebilobate 11/12, 2013 at 17:59

Has anybody found an explanation/solution for this? – Unshroud 10/8, 2014 at 22:10

I worked around this by using the background css shorthand method. Define the image, repeat, and size all in one line like so:

background: url({{ item1.picture }}) no-repeat top / 100% auto;

Notice that the size attribute should be defined after the position attribute ('top') and delimited with '/'.

Forebear answered 25/8, 2014 at 20:41 Comment(4)

Worked perfectly. Brilliant. – Normi 30/1, 2015 at 3:59

THIS IS VERY GOOD! IT WORKS :D – Knelt 7/1, 2016 at 8:50

Chrome still strips the size and keeps only the no-repeat. Is there something I'm doing wrong ? – Drama 21/3, 2016 at 12:11

Brilliant solution 👍 – Piping 19/8, 2016 at 12:8

Your technique won't work in Outlook. I know it is not in the question, but it is the #2 most popular email cleint. I'd suggest going with a VML/background combination as demonstrated in backgrounds.cm.

I'm not sure if you will get a 100% resized background image working in html email though. I've only seen tiled or non-tiled implementations. Is there any reason you couldn't just use a normal image tag? Something like this works well cross client:

<td>
  <img alt="" src="" width="100%" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>

Monandry answered 13/1, 2014 at 15:27 Comment(0)

I was building inside an email a button with the twitter logo like that:

So I was using background-image to add the Twitter logo and background-size to render the retina size of the image.

I tried the full version of background-* CSS properties, as well as the shorthand version background: url() no-repeat 16px center / 24px auto, Gmail was still striping it.

So my solution is to use the img HTML tag instead of background property. And it works actually better as img tag is more broadly supported among email clients.

<a href="#" style="background-color: #55acee; display: inline-block; padding: 12px 24px;  color: #ffffff;  font-family: sans-serif; font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; text-decoration: none; min-width: 200px; border-radius: 2px; border-bottom-color: #188acf; border-bottom-width: 3px; border-bottom-style: solid;">
  <!-- logo image should be 48x48px -->
  <img src="[email protected]" width="24" height="24" style="vertical-align: bottom; padding-right: 10px;"> 
  Share the good news on Twitter
</a>

Metempirics answered 9/2, 2016 at 19:21 Comment(0)

Recommended topics

Hot tags