Gmail and background images
Thank you to everyone who helped push for this fix and provided feedback to Gmail.
Email clients are unpredictable and they can push changes that will impact billions of emails without notice. It looks like Gmail has just done that by dropping support for background images.
This issue was first reported in the EmailGeeks slack on Monday 17th July.
Gmail will not only remove the background image but also the entire style="" attribute. Or, in the case where it’s set in an embedded <style> block, that whole block is removed. This is a common behavior for Gmail when it encounters styles it does not support.
This applied to both the shorthand background property as well as the longhand background-image property when a url() is set. This does not apply to gradients so it’s not an issue with background over all, just background images. The Gmail CSS support documentation still lists both background and background-image as supported properties.
This appears to be rolling out sporadically; some users are seeing it, some not. Personally I’m only seeing the issue on my Google Workspace account in Chrome Canary 117; looking at the same email in Chrome 115 there is no issue. Others have seen in the issue with regular Gmail accounts and in various browsers.
Setting Background with an uppercase B.
Gmail will still remove the background, however the rest of the style attribute remains in place including any background-color fallback that you have set.
Setting background image in a class.
Gmail will still remove the background, and <style> block, so be sure to keep it separate from your other styles so when it’s removed it won’t break anything else. Other email clients will still support it.
Setting background attribute.
Background images can still be set on a background="" attribute, however this only works on <body>, <table>, <td> and <th> elements. Gmail will remove the body element, so that’s not an option and we generally advise against using <table> layouts as they bring a number of accessibility and rendering issues.
We have added the bug to the Google Issue tracker, so you can watch there for any updates from Google. If this bug is causing issues for you, then please also click the +1 button in the top right corner to add support for getting it fixed.