Background-size not working

[Scott_Miller2]

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.

Thanks

[Casey_Grimes]

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.

[Dave_Roberts]

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.