Background images and background colors (as a backup)

I've designed an email with a dark grey background image to match our website design.  I am aware that some email programs do not recognize background images, so as a safety backup I also included a background color into the code, so that if the email program does not display the image, it will (hopefully) display the color.  However the problem is, when I include both the background color and background image, ALL email clients display the color and ignore the image.  If I remove the background color code, the clients which recognize background images correctly display them, while others leave me with a white background.

Here is a snippet as an example:

<div style="background-color: #404040; background-image: url(''); background-repeat: scroll top left; width: 700px; ">

You'll see that I included the background color as well as the image.

What I would like to happen is this:
For email clients which support it, I would like to display the background image.
For email clients which do not support background images, I would like for them to display the background color.

Is there any way to do this?  What am I doing wrong?

Thanks in advance for your help...

BThies BThies, 7 years ago

Try nesting a table to guarantee your width and easily set the BG color with the background image:

<table width="700" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#404040">
<div style="background-image: url(''); background-repeat: scroll top left;">&nbsp;</div>

Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free