15

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.

4
  • what doctype you are using
    – Anon
    Dec 5, 2013 at 13:18
  • 1
    You could try the setting the image as the background of the table rather than using the style attribute as described in stackoverflow.com/questions/8015515/… Dec 5, 2013 at 13:23
  • @Anon: None. Maybe it's stupid question, but is it really that important?
    – nu.frix
    Dec 11, 2013 at 17:59
  • Has anybody found an explanation/solution for this?
    – Nicolas
    Aug 10, 2014 at 22:10

3 Answers 3

35

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 '/'.

4
  • Worked perfectly. Brilliant.
    – Jon Sakas
    Jan 30, 2015 at 3:59
  • THIS IS VERY GOOD! IT WORKS :D Jan 7, 2016 at 8:50
  • Chrome still strips the size and keeps only the no-repeat. Is there something I'm doing wrong ? Mar 21, 2016 at 12:11
  • Brilliant solution 👍
    – Mo.
    Aug 19, 2016 at 12:08
0

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>
0

I was building inside an email a button with the twitter logo like that: enter image description here

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.