Gmail desktop Chrome no longer supporting CSS background images

[alicemeichi]

Moving over here from the original thread on CanIEmail: https://github.com/hteumeuleu/caniemail/issues/343

For additional context, the #EmailGeeks thread is here: https://emailgeeks.slack.com/archives/C1Z733K1P/p1689801626809569?thread_ts=1689566681.230239&cid=C1Z733K1P

This Google Chrome release update may be the culprit for the issue: https://chromereleases.googleblog.com/2023/07/stable-channel-update-for-desktop.html

[M-J-Robbins]

Very quick, damage limitation work around. Already talked about this on the Parcel blog but sharing here for more visibility.

If you use an uppercase B in Background Gmail will remove the property before it hits the bug which strips the entire style. This doesn't fix the issue, the background will still be removed from Gmail however it does stop it from destroying the rest of your code by removing the other styles in the style="" attribute or the embedded <style> block.

[JayOram]

Workaround that fixes the problem if you use tables: https://parcel.io/e/9ead8494-ab9f-45d7-84a1-7a9fc5b68632

To break it down <style> in head contains background properties for Gmail webmail - but not background-image: url(...)

On the td - background="..." HTML attribute used for Gmail webmail and other clients that support it.

Inline style="..." contains background attributes for all email clients including shorthand for GANGA - that has the image url:

background: url(https://via.placeholder.com/640x400) center / cover no-repeat #000000;

class="..." on the td specifically for gmail properties in the head.

If using divs for layout - I haven't seen anyone with a solution, apart from to resort to using tables 😢

[M-J-Robbins]

@hteumeuleu just seen this is still open but the issue is fixed now so thinking it should be ok to close it