Background Check

Some of the most common questions we get here in support at Bronto revolve around using backgrounds in email. Can it be done, should it be done, and how to do it right are the ones we hear the most. This blog post will answer these questions and act as a quick reference.

There are two different types of backgrounds to consider, background images and background colors. Each has it's own merits and problems. Let's take a look.

Background Images

Background images are images that appear behind other content in your message, either to add depth or to enhance the look and feel of the message. These can be an image of anything, from a simple gradient, to a picture of a happy puppy. They can be great for making a message look nice, but many email clients do not support them. If your message contains a background image, and is read by one of these email clients, it will show up as a plain white background. This could ruin the look and feel of the message. Additionally, the use of extra images in your messages will increase the file size and affect the speed at which the images download.

We recommend that our clients avoid using background images in their messages, at least until email client HTML rendering becomes advanced enough to support them.

Background Colors

Background colors are similar to background images, in that they can be used to highlight and enhance the look and feel of the message. The difference is that background colors can be created without the use of images. They are purely HTML code. This means they won't add any additional file size to your message, and many more email clients support them. There are still some email clients that do not recognize background colors as well, so they may not carry over to all email clients. The most prevalent client that doesn't render background colors is Googles gmail client.

Background colors are easy to code and can be added to any table cell in your email template. To add a background color to a <td>, you simply append the following, bgcolor="cccccc", like this:

<td bgcolor="#cccccc">

Adding this simple attribute will turn this:

Into this:

The colors can easily be changed by swapping out the #cccccc for another HEX code. You can find a handy list of HEX codes and the colors they represent by clicking here.

Conclusion

The final word on background elements in email is unfortunately, not definitive. They can certainly help to enhance your messages, but they may not always turn out how you would like, depending on the email client that is rendering them. So, the Bronto mantra applies here as well - test, test, test, to ensure that your emails are being delivered the way that you intend.

Got a great tip on how to better optimize backgrounds or background images in your messages? Please let us hear it in the comments.

Lucas Weber
Bronto Support Services