Changes to how ‘new look’ Gmail displays backgrounds

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

Themed preview pane in Gmail

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.

Posted by Ros Hodgekiss

6 Comments

  • B. Moore
    27th March

    Care to guess what the % of Gmail users take the time to change the Theme in Gmail?

    My gut is telling me the % is very very low.

  • Josh Street
    28th March

    @B. Moore - a guess would be just a guess, and between Gmail and user themes in desktop clients when forwarding emails it’s probably worth the tiny amount of additional effort to provide a stable experience.

  • Jonas
    2nd April

    I always took for granted how good the old GMAIL interface was until I upgraded (I consider it more of a downgrade) to the new GMAIL. THe first things I noticed right off the bat is that the spacing is off kilter, the scroll bar no longer works, it runs at half speed, everything is harder to find, the default color scheme is an ugly eye sore and adding a theme to it is analogous to polishing a turd. Thank god Mozilla imaps to gmail…much much better now.

  • WebMatros
    18th April

    Thanks for posting this fix. Indeed it bugged me, and yes B. Moore - many people DO in fact change their theme. I know a few. And considering Gmails large user base, we’re talking quite a lot of people/reciepients. As Josh said, it’s an easy fix, so why not do it. Oliver, WebMatros

  • Jen
    25th April

    Unfortunately, when you have a really long email, wouldn’t throwing an encompassing table around it possibly break stuff in Outlook where long tables seem to have issues and you recommended stacking tables?

  • Ros Hodgekiss
    26th April

    Hi Jen, it’s true that Outlook can add strange gaps to long messages, but one can argue by that once a single content area reaches this length (23.7 inches), the email content is way too long to be optimal for the recipient.

    This gaps issue is unlikely to affect an email of average length (especially when broken into multiple content sections), but is certainly something to keep in mind. Thanks for the reminder on this one!

Sign up for free.
Then send campaigns for as little as $9/month

Create an account