Amongst the moving and shaking that’s come with Gmail’s ‘new look’ have been a couple of changes to how this email client handles background colors and images. To some of you this may be old news, but for many it may change the way you design for this notoriously finicky client. So here goes.
Gmail now supports background-image
Although it’s but a small victory, it looks like Gmail has expanded its CSS support to encompass the background and background-image properties. This means that you can now define background images for elements like table cells and divs, leaving Hotmail, Outlook 2007+ and Lotus Notes as the only major clients that don’t support what’s a fairly fundamental CSS property. Thankfully, there’s a hack for background images in Outlook 2007/2010, so it’s up to you to make the call - do you design with background images in mind (and a fallback color)? Or play it safe?
Note that background-position and background-repeat are still not supported - only images, for now.
Background colors or images are now a must
With Gmail’s new themes (which I have to admit, are very pretty), have been changes to how email newsletters appear in the preview pane. With themes activated, the preview pane is actually semi-transparent, allowing the theme to show through. The only way to fix this is to nest your design in a full-width table, for example <table width="100%" bgcolor="#FFFFFF" ... >, thus providing an opaque background for your content. Pictured is an example of content inside and outside of a table with a background color, as seen in Gmail’s themed inbox.
Many thanks to Responsys for their post, ‘Workaround for Gmail Background Translucency’ and our keen customers who wrote in about background image support. If you’ve seen any news and notable changes in Gmail, or have your own tip for working with backgrounds, be sure to let us know in the comments below.