Background-size not working

Level 1

Background-size not working

Hi All,

I am having a small issue that I can't seem to find an answer to...

I am trying to have a background image stretch to cover the table's <td>. I am using the background-size css property (background-size: cover) to make the image stretch and cover the entire background. While in the editor, all looks correct, however, when I send a sample to test it out, the image is repeating and when I inspect the code (using chrome inspector) the background-size property has been removed...below is the code that I am using in the editor (code in question is bold).

<td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;background-image:${gifvidBackgroundImage};background-repeat: no-repeat; background-size: cover; background:${gifvidBackgroundImage};background-color:${gifvidBackgroundColor};border-collapse: collapse;" background="${gifvidBackgroundImage}" bgcolor="${gifvidBackgroundColor}" valign="middle">

I have attached screenshots of the editor (correct) and the sample email (gmail) that shows how the background is being repeated (incorrect). Is there anything that I am missing to have this work correctly.


Level 10

Re: Background-size not working

Hi Scott,

Support for background-cover is spotty at best, but in this particular case, there is a known rewrite where Gmail will alter this rule to be background-cover: contain. It's usually for the best to size the image to cover the correct amount of space and just use media queries if you're looking to have it scale dynamically.

Level 10

Re: Background-size not working

Hey Scott-

I normally try to stay away from background images in email all-together, but when I do use them, I'll usually add them to a table or div instead of the <td>. In this case, you might try nesting a div inside that <td> and adding the background properties to that? Another thing that I noticed is that you've got a bunch of background-ish things set -- background-image, background, background=, background-color, and bgcolor=. You might try re-arranging these, I've seen mixed results when using the attribute (background="___") versus the inline style (background:____;), you might try using just the background-image property on a table or div. You'll still run into issue with Outlook and a few other clients that dont support bg-images. I also agree with Courtney that it's best to have the image sized appropriately in the first place to help hedge issues like this.