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('http://www.iconstudiosatl.com/Icon_Email/The_email_files/PhotoGray_bg_c-1.jpg'); 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...
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('http://www.iconstudiosatl.com/Icon_Email/The_email_files/PhotoGray_bg_c-1.jpg'); background-repeat: scroll top left;"> </div>